Question

我有一个网站，基于语言en, sq or el,我想更改图片来源。所以我有一个名为screenshots的文件夹，然后有三个文件夹：en , sq and el。

例如，名为“slide-phone.png”的图片的网址为：

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

在html文字中，我有一个参数：{{ _('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 div是这样的：

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

控制台提供正确的链接：img is: img/screenshots/en/slide-phone.png但src属性为空！

为什么会发生这种情况，我不明白，有人可以帮助我吗？

Answer 1

根据我的评论，您需要将代码包装在<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

注意：.prop() vs .attr()（为什么我使用string : 6806642004683587 (varchar)）

Answer 2

只需获取html属性“lang”值并根据该值更改图像src。

    $(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);
     }
  });

Answer 3

文档准备好后，您需要执行脚本。例如，将其包装在$(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);
});

用jquery替换图像的src

3 个答案: