How can I replace image with javascript?

Question

My view like this :

<li id="thumbnail-view" class="count-photo">
    <div class="thumbnail">
        <img src="{{ asset('img/thumbs/'.$photo) }}" alt="">
        <a href="javascript:" class="thumbnail-check"><span class="fa fa-check-circle"></span></a>
        <ul class="list-inline list-edit">
            ...
        </ul>
    </div>
</li>

My javascript like this :

var photo = 'flower.jpg';
var res = `<img src="{{ asset('img/thumbs/'+photo) }}" alt="">`
$('#thumbnail-view img').html(res);

If the javascript code executed, I want to change the image

I try like that, but it does not work

How can I do it?

I don't think your question is clear enough！"{{ asset('img/thumbs/'.$photo) }}" is like a template, i think you must follow the template Convention — alalalala
– alalalala, Commented Jun 8, 2017 at 10:14
Just use attr. Its a jquery function. You can set or get any attribute of a selected element. — Rudraksh Pathak
– Rudraksh Pathak, Commented Jun 8, 2017 at 10:15

Janen R · Accepted Answer · 2017-06-08 10:05:33Z

5

Simple way

 var photo = 'flower.jpg';
 $('#thumbnail-view img').attr('src', photo);

answered Jun 8, 2017 at 10:05

Janen R

7491 gold badge11 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

MrCode · Accepted Answer · 2017-06-08 10:08:59Z

3

Don't set the inner HTML of an image, set its src property.

$('#thumbnail-view img').prop("src", "{{ asset('img/thumbs/') }}"+photo);

Sidenote: if this is in a .js file then your template engine probably will not process the asset tag so you need to hardcode the path or grab it from elsewhere.

$('#thumbnail-view img').prop("src", "/assets/img/thumbs/"+photo);

answered Jun 8, 2017 at 10:08

MrCode

64.6k10 gold badges95 silver badges114 bronze badges

1 Comment

samuel toh Over a year ago

I need you help. Look at this : stackoverflow.com/questions/44674975/…

Cloud · Accepted Answer · 2017-06-08 10:10:11Z

1

You should use like this: $('#thumbnail-view img').attr('src','path/to/photo');

answered Jun 8, 2017 at 10:10

Cloud

1,0541 gold badge22 silver badges52 bronze badges

Collectives™ on Stack Overflow

How can I replace image with javascript?

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related