用 jquery 替换图像的 src答案

【问题标题】：Replace src of an image with jquery用 jquery 替换图像的 src
【发布时间】：2016-03-01 10:20:10
【问题描述】：

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

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

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 属性为空！

为什么会这样，我不明白，有人可以帮助我吗？

【问题讨论】：

尝试将您的代码包装在$(document).ready(function() { ... your code here ... });
我认为设置属性的首选方法是使用prop，请参见下面的示例。 attr() 也可以正常工作。

标签： javascript jquery html image

【解决方案1】：

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

【讨论】：

非常感谢您的评论！如果你能回答，我还有一个问题。我还尝试了另一种网址方式，但如果我使用这种网址，它不起作用： $('#slide-phone-img').attr('src',{{ url_for('static', filename = img_url) }});如果我们考虑另一个包含 img 文件夹的静态文件夹。为什么 src 是空白的？
函数url_for 很可能没有返回所需的值。为什么不控制台记录它以确保它返回图像 uri？
看起来您正在使用 {{ .. }} 使用 laravel/blade 模板引擎。默认情况下，Blade{{ }} 语句会通过 PHP 的 htmlentities 函数自动发送，以防止 XSS 攻击。如果您不希望您的数据被转义，您可以使用以下语法：$('#slide-phone-img').attr('src', {{! url_for('static', filename = img_url) !}}); - 请参阅文档laravel.com/docs/5.2/blade
img_url 的值是这样的：img/screenshots/en/slide-phone.png。但是使用 url_for 的链接给出了这个：0.0.0.0:5002/static
@Latheesan 我正在使用 python 和 jinja

【解决方案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);
     }
  });

【讨论】：

很高兴为您提供帮助。@TinMat

【解决方案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);
});

【讨论】：