Переменная в IMG
Итак, я пытаюсь включить переменную в свой тег IMG, чтобы в основном заменить раздел именем пользователя. При успешном входе в систему я хочу, чтобы он получил имя пользователя, который был успешно аутентифицирован, и заменил это имя пользователя в переменной. Я использую javascript и html. Любые идеи о горячем, я могу этого добиться? Если я вручную установил для img src значение jpg, он отобразится, а остальная часть моего кода будет работать должным образом. Мне просто нужно, чтобы он показывал картинку в зависимости от имени пользователя.
$('form').submit(function () {
var username = $('#username').val(),
password = $('#password').val();
clearMessage();
if (!username || !password) {
showMessage('Enter a username and a password');
return false;
}
// Web Proxy request to log the user on
ajaxWrapper({
url: 'PostCredentialsAuth/Login',
dataType: 'xml',
success: loginSuccess,
error: loginError,
data: { username: username, password: password }
});
function loginSuccess(data) {
var $loginXml = $(data),
result = $loginXml.find('Result').text();
if (result == 'success') {
$('form').hide();
$('#log-off').show();
$('#EmployeePic').show(); <img id = "EmployeePic" src = "'EmployeePhotos/'+Username+'.jpg'" alt = "EmployeePic" class = "EmployeePic" height = "96" width = "96" >А что бы я установил для HTML куска? <img id = "EmployeePic" src = "'EmployeePhotos /' + Имя пользователя + '. jpg'" alt = "EmployeePic" class = "EmployeePic" height = "96" width = "96">
Изображение по умолчанию, которое, возможно, будет заменено изображением пользователя. Зависит от тебя. Вы также можете скрыть изображение, пока пользователь не войдет в систему.
Muecas, попробовал это, но не сработало. В настоящее время я настроил его на отображение изображения в случае успеха. Это то, что делают последние 4 строки кода.
Вы должны сначала скрыть его, чтобы вы могли отобразить его позже. Проверьте мой ответ.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Сначала вы можете скрыть свое изображение (я добавил несколько встроенных стилей, но вы также можете сделать это с помощью jQuery: $('#EmployeePic').hide();. Затем, когда пользователь входит в систему, источник изображения изменяется на username.jpg, и изображение отображается.
$('form').submit(function () {
var username = $('#username').val(),
password = $('#password').val();
clearMessage();
if (!username || !password) {
showMessage('Enter a username and a password');
return false;
}
// Web Proxy request to log the user on
ajaxWrapper({
url: 'PostCredentialsAuth/Login',
dataType: 'xml',
success: loginSuccess,
error: loginError,
data: { username: username, password: password }
});
function loginSuccess(data) {
var $loginXml = $(data),
result = $loginXml.find('Result').text();
if (result == 'success') {
$('form').hide();
$('#log-off').show();
$('#EmployeePic').error(function() {
$(this).attr('src', 'EmployeePhotos/Default.jpg');
}).attr('src', 'EmployeePhotos/'+$('#username').val()+'.jpg').show();
}
}
});<img id = "EmployeePic" src = "" alt = "EmployeePic" class = "EmployeePic" height = "96" width = "96" style = "display: none;">Так что это почти работает. Все работает хорошо, за исключением того, что имя пользователя из отправленной формы не получается. Если я изменю его на $ ('# EmployeePic'). Attr ('src', 'EmployeePhotos / username.jpg'). Show (); он покажет указанный мной файл. Как только я попробую и позволю ему вытащить имя пользователя из формы, он его не вытянет.
Это странно. Переменная username находится в той же области, что и функция loginSuccess (по крайней мере, в вашем примере). Я изменил его, поэтому он всегда извлекается из ввода формы. Сообщите мне, сработало ли это.
Кроме того, проверьте свою консоль, чтобы увидеть, существует ли назначенное изображение в файлах вашего проекта.
Это сработало! Большое спасибо, муэкас! Как побочный вопрос. В настоящее время у меня есть все фотографии на другом файловом сервере, которого здесь нет. Для тестирования я создал папку EmployeePhotos, чтобы заставить это работать. Можно ли получить местоположение из общего ресурса, например \\ share \ employeeephotos?
Я думаю, что будет лучше получить доступ к этим файлам с веб-сервера (может быть веб-сервер в вашей собственной сети). Чтобы получить изображения из этого места, любому компьютеру потребуются права доступа к папке и файлам на сервере. Рад, что мне холодно помогли. Отметьте ответ как правильный, если он решил вашу проблему. Спасибо!
Хорошо, я могу просто настроить скрипт для зеркального отображения папки там, где у меня его нет. И последнее, если у пользователя нет файла в этой папке, есть ли способ по умолчанию использовать стандартный jpb, например Default.jpg, если нет username.jpg?
Если вы хотите протестировать, просто измените сценарий, изменяющий источник изображения, на $('#EmployeePic').attr('src', '\\share\employeephotos\'+$('#username').val()+'.jpg').show();.
Это сработало! Еще раз спасибо. Ты великолепен. Просто учусь программировать, и вы мне очень помогли.
Как насчет
$('#EmployeePic').attr('src', 'EmployeePhotos/'+username+'.jpg');?