Заменить src на изображение с помощью jquery

У меня есть веб-сайт и на основе языка en, sq or el, Я хочу изменить источник изображения. Итак, у меня есть папка с именами скриншотов, тогда есть три папки: en , sq and el.Заменить src на изображение с помощью jquery

Например, URL для картины под названием «слайд-phone.png» является:

img/screenshots/en/slide-phone.png 
img/screenshots/sq/slide-phone.png 
img/screenshots/el/slide-phone.png

На HTML текст У меня есть prameter: {{ _('en') }}, который может иметь один из этих значения: en , sq and el. В этом случае en.

<html lang="{{ _('en') }}"> 
<head> 
<script type="text/javascript"> 
    img_url = 'img/screenshots/'+"{{ _('en') }}"+'/slide-phone.png'; 
    console.log("img is:" , img_url); 
    $('#slide-phone-img').attr('src',img_url); 
</script>

HTML-ДИВ, как это:

<img id="slide-phone-img" src="" >

Консоль дает правильную ссылку: img is: img/screenshots/en/slide-phone.png но атрибут SRC пуст!

Почему это происходит, я не понимаю, может кто-нибудь мне помочь?

источник

2016-03-01 EgzEst

попробовать оборачивать код в '$ (документ) .ready (функция() {... код здесь ...});' – Latheesan

Спасибо, я забыл, что! – EgzEst

Я думаю, что предпочтительным методом установки атрибутов является использование примера «prop», как показано ниже. 'attr()' также отлично работает. – Latheesan

В соответствии с моим комментарием вам необходимо обернуть код в $(document).ready(); закрытии.

Рабочий пример:

<html> 
<head> 
<script type="text/javascript" src="http://code.jquery.com/jquery-1.12.1.min.js"></script> 
<script type="text/javascript"> 

// When document is loaded 
$(document).ready(function() 
{ 
    img_url = 'https://www.google.co.uk/logos/doodles/2016/st-davids-day-2016-5676738174517248-hp.jpg'; 
    $('#slide-phone-img').prop('src', img_url); 
}); 

</script> 
</head> 
<body> 
    <img id="slide-phone-img" src="" > 
</body> 
</html>

Примечание: .prop() vs .attr() (почему им с помощью prop)

источник

2016-03-01 10:25:50 Latheesan

Спасибо за комментарий! У меня есть дополнительный вопрос, если вы можете ответить. Я попробовал еще один способ URL-адресов, но он не работает, если я использую такие URL-адреса: $ ('# slide-phone-img'). Attr ('src', {{url_for ('static', filename = img_url) }}); если мы рассмотрим другую статическую папку, содержащую папку img. Почему src пустой? – EgzEst

Скорее всего, функция 'url_for' не возвращает желаемое значение. Почему бы вам не включить консоль в журнал, чтобы убедиться, что она возвращает изображение uri? – Latheesan

Похоже, вы используете larvel/blade templating engine, используя '{{..}}'. По умолчанию инструкции Blade '{{}}' автоматически отправляются через функцию htmlentities PHP для предотвращения атак XSS. Если вы не хотите, чтобы ваши данные были экранированы, вы можете использовать следующий синтаксис: '$ ('# slide-phone-img'). Attr ('src', {{! Url_for ('static', filename = img_url) !}}); '- см. документацию https://laravel.com/docs/5.2/blade – Latheesan

Вы должны выполнить скрипт, как только документ будет готов. Например, обернув его в $(document).ready обработчика:

$(document).ready(function() 
{ 
    img_url = 'https://www.google.co.uk/logos/doodles/2016/st-davids-day-2016-5676738174517248-hp.jpg'; 
    $('#slide-phone-img').attr('src', img_url); 
});

источник

2016-03-01 10:32:24 vijay

Просто получить атрибут HTML «языки» значение и ЦСИ изменение изображения в соответствии с этим значением.

$(document).ready(function(e){ 
     var language = $('html').attr('lang'); 
    if(language == "en"){ 
     var img_src = "img/screenshots/en/slide-phone.png"; 
     $('#slide-phone-img').attr('src',img_src); 
    } 
    else if(language == "sq"){ 
     var img_src = "img/screenshots/sq/slide-phone.png"; 
     $('#slide-phone-img').attr('src',img_src); 
    } 
    else{ 
      var img_src = "img/screenshots/el/slide-phone.png"; 
     $('#slide-phone-img').attr('src',img_src); 
    } 
    });

источник

2016-03-01 11:43:37 Muthu

Это хорошая идея, спасибо! – EgzEst

рад помочь. @ TinMat – Muthu

Заменить src на изображение с помощью jquery

ответ

Смежные вопросы