Javascript 用jquery替换图像的src_Javascript_Jquery_Html_Image

Javascript 用jquery替换图像的src

javascript jquery html image

Javascript 用jquery替换图像的src,javascript,jquery,html,image,Javascript,Jquery,Html,Image,我有一个网站，基于语言en、sq或el，我想更改图像源。所以我有一个名为screenshots的文件夹，然后有三个文件夹：en、sq和el 例如，名为“slide phone.png”的图片的URL为： img/screenshots/en/slide-phone.png img/screenshots/sq/slide-phone.png img/screenshots/el/slide-phone.png 在html文本中，我有一个prameter:{{{{（'en'）}可以有以下值之一：

我有一个网站，基于语言

en、sq或el，

我想更改图像源。所以我有一个名为screenshots的文件夹，然后有三个文件夹：

en、sq和el

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

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

在html文本中，我有一个prameter:

{{{{（'en'）}

可以有以下值之一：

en、sq和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>


img_url='img/screenshots/'+'{{{{（'en'）}}+'/slide phone.png'；
log（“img是：”，img_url）；
$（“#滑动电话img”）.attr（'src'，img_url）；

HTML div如下所示：

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

控制台提供了正确的链接：

img是：img/screenshots/en/slide phone.png

，但是src属性是空的

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

根据我的评论，您需要将代码包装在

$（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>


//加载文档时
$（文档）.ready（函数（）
{
img_url=https://www.google.co.uk/logos/doodles/2016/st-davids-day-2016-5676738174517248-hp.jpg';
$（“#滑动电话img”）.prop（'src'，img_url）；
});

注意：（为什么我要使用prop
）
根据我的评论，您需要将代码包装在$（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>


//加载文档时
$（文档）.ready（函数（）
{
img_url=https://www.google.co.uk/logos/doodles/2016/st-davids-day-2016-5676738174517248-hp.jpg';
$（“#滑动电话img”）.prop（'src'，img_url）；
});

注意：（为什么我使用prop
）
文档准备好后，您需要执行脚本。例如，将其包装在$（文档）中。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);
});

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

只需获取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);
     }
  });

只需获取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);
     }
  });

尝试将代码包装到$（document）.ready（function（）{…此处的代码…}）prop
参见下面的示例attr（）
也可以正常工作。请尝试将代码包装在$（文档）中。准备就绪（函数（）{…此处的代码…}）prop
参见下面的示例attr（）
也可以正常工作。非常感谢您的评论！如果你能回答，我还有一个问题。我还尝试了另一种url方式，但如果我使用这种url，它不起作用：$（'slide phone img'）.attr（'src'，{url_for（'static'，filename=img_url）}）；如果我们考虑另一个包含IMG文件夹的文件夹。为什么src为空？最有可能的是
的函数url\u没有返回所需的值。为什么不通过控制台记录它以确保它返回图像uri？看起来您正在使用laravel/blade模板引擎，方法是使用{{..}
。默认情况下，Blade{{}}
语句会通过PHP的htmlentities函数自动发送，以防止XSS攻击。如果您不希望转义数据，可以使用以下语法：$（'#滑动电话img'）.attr（'src'，{{！url_for（'static'，filename=img_url）！}）-请参阅文档。img_url值如下：img/screenshots/en/slide-phone.png。但是使用url_的链接给出了这样的信息：@Latheesan我正在使用python和Jinja非常感谢您的评论！如果你能回答，我还有一个问题。我还尝试了另一种url方式，但如果我使用这种url，它不起作用：$（'slide phone img'）.attr（'src'，{url_for（'static'，filename=img_url）}）；如果我们考虑另一个包含IMG文件夹的文件夹。为什么src为空？最有可能的是
的函数url\u没有返回所需的值。为什么不通过控制台记录它以确保它返回图像uri？看起来您正在使用laravel/blade模板引擎，方法是使用{{..}
。默认情况下，Blade{{}}
语句会通过PHP的htmlentities函数自动发送，以防止XSS攻击。如果您不希望转义数据，可以使用以下语法：$（'#滑动电话img'）.attr（'src'，{{！url_for（'static'，filename=img_url）！}）-请参阅文档。img_url值如下：img/screenshots/en/slide-phone.png。但是使用url_的链接给出了这样的信息：@Latheesan我正在使用python和Jinjagaid来帮助他。@Tinmatagaid来帮助他。@TinMat