在图像不起作用的 src 中添加 jQuery 变量

Add jQuery variables in src of an image not working

本文关键字：添加 jQuery 变量 src 图像 不起作用      更新时间：2023-09-26

我有一个网站，根据语言en, sq or el,我想更改图像源。所以我有一个名为屏幕截图的文件夹，然后有三个文件夹：en, sq and el。

例如，名为"slide-phone.png"的图片的 URL 为：

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

我想获取 HTML 标记的属性 lang，然后将其添加到图像源中，但由于某些原因，它不起作用。

我的代码如下所示：

<html lang="{{ _('en') }}">
<script type="text/javascript">
 $(document).ready(function(e){
       var language = $('html').attr('lang');
});
</script>
...
 <img  id="slide-phone-1-img" src="{{ url_for('static', filename='img/screenshots/' + language+'slide-phone.png') }}" >

我正在使用python和jinja。任何帮助:)

编辑：

我也尝试过这样，但问题是我想使用 jinja，为此我需要更改此代码：

<html lang="{{ _('en') }}">
    <script type="text/javascript">
     $(document).ready(function(e){
           var language = $('html').attr('lang')
           img_url = 'img/screenshots/'+ language+'/slide-phone.png';
           $('#slide-phone-img').attr('src',img_url);
    });
    </script>

像这样

$(document).ready(function(e){
       var language = $('html').attr('lang');
       var new_url = $('#slide-phone-1-img').attr("src").replace("language", language);
       console.log(new_url);
       $('#slide-phone-1-img').remove();
       $('#imges').prepend('<img id="slide-phone-1-img" src="'+new_url+'" />');
$('#show').html( $('#slide-phone-1-img').attr("src").replace("language", language));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html lang="{{ _('en') }}">
   <body>
    <div id="imges">
     <img  id="slide-phone-1-img" src="{{ url_for('static', filename='img/screenshots/language slide-phone.png') }}" > 
    </div>   
    <div id="show">
      <p></p>
    </div>
   </body>
</html>

相关文章：