Replace src of an image with jquery

Question

I have a website and based on language en, sq or el, I want to change image source. So I have a folder named screenshots then there are three folders: en , sq and el.

For example the URL for a picture named 'slide-phone.png' is:

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

On the html text I have a prameter : {{ _('en') }} that can have one of those value: en , sq and el. In this case is 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>

The HTML div is like this:

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

The console gives the right link: img is: img/screenshots/en/slide-phone.png but the src attribute is empty!

Why is happening this, I don't get it, can someone help me?

try wrapping your code in `$(document).ready(function() { ... your code here ... });` — Latheesan, Mar 01 '16 at 10:21
I think the prefered method to set attributes is to use `prop` see example below. `attr()` also works fine. — Latheesan, Mar 01 '16 at 10:27

score 6 · Answer 1 · edited May 23 '17 at 12:31

6

As per my comment, you need to wrap the code in $(document).ready(); closure.

Working example:

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

Note: .prop() vs .attr() (why im using prop)

edited May 23 '17 at 12:31

Community

1
1

answered Mar 01 '16 at 10:25

Latheesan

23,247
32
107
201

Thanks a lot for ur comment! I have an additional question if you can answer. I tried also another way of urls but it's not working ,if I use this kind of URLs: $('#slide-phone-img').attr('src',{{ url_for('static', filename = img_url) }}); if we consider another folder static that contains img folder. Why is the src blank? – EgzEst Mar 01 '16 at 10:30
Most likely the function `url_for` is not returning the desired value. Why don't you console log it to make sure it's returning image uri? – Latheesan Mar 01 '16 at 10:32
Looks like you are using laravel/blade templating engine by using `{{ .. }}`. By default, Blade `{{ }}` statements are automatically sent through PHP's htmlentities function to prevent XSS attacks. If you do not want your data to be escaped, you may use the following syntax: `$('#slide-phone-img').attr('src', {{! url_for('static', filename = img_url) !}});` - see documentation https://laravel.com/docs/5.2/blade – Latheesan Mar 01 '16 at 10:35
the img_url value is this: img/screenshots/en/slide-phone.png. But the link using url_for gives this : http://0.0.0.0:5002/static/ – EgzEst Mar 01 '16 at 10:37
@ Latheesan I'm using python and jinja – EgzEst Mar 01 '16 at 10:37
After using ! i got an error: TemplateSyntaxError: unexpected char u'!' at 269 – EgzEst Mar 01 '16 at 10:39
If you are using `python` and `jinja`, then ignore my remarks, they are for `Laravel` & `Blade` engine. You should post this issue as a new question. – Latheesan Mar 01 '16 at 11:12

score 3 · Answer 2 · answered Mar 01 '16 at 11:43

Just get html attribute "lang" value and change image src according to that value.

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

score 0 · Answer 3 · edited Mar 01 '16 at 13:15

0

You need to execute your script once the document is ready. For example by wrapping it in a $(document).ready handler:

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

edited Mar 01 '16 at 13:15

ne1410s

6,864
6
55
61

answered Mar 01 '16 at 10:32

vijay

186
2
12

Replace src of an image with jquery

3 Answers3