Changing img src via JavaScript

Question

I got this HTML image item:

<img class="profile-photo img-responsive img-circle" id="imagen_perfil_banner" src="{{ asset('admin/img/profile1.jpg') }}" >

Then I got the JS that changes the src attribute of the image like this:

document.getElementById("imagen_perfil_banner").src = info[13];

The info[13] variable has the next information:

{{ asset('admin/img/1.jpg') }}

When tha page loads, it just doesn't show the image that I send via JS, but when I put the image directly on the image src attribute, it loads just fine.

What is the eventual text that is sent to the src attribute? what data representation is this {{ asset('admin/img/1.jpg') }}? — kennasoft
– kennasoft, Commented Aug 22, 2017 at 15:27
take note that javascript is in the client side, {{ asset('admin/img/1.jpg') }} must be processed first in the backend before it will be sent to the client/browser. So assigning {{ asset('admin/img/1.jpg') }} via javascript and expecting it to pull the image asset from the backend is impossible since browser will treat it as a string — Roljhon
– Roljhon, Commented Aug 22, 2017 at 15:29
@kennasoft {{ asset('admin/img/1.jpg') }} seems to be some sort of javascript that needs to be pre-processed, which will have the value of the return of asset('admin/img/1.jpg') call — Daniel
– Daniel, Commented Aug 22, 2017 at 15:31
@CarlosJaramilloCorrales brother, you can't do that. As I said above, {{}} belongs to laravel or the backend which simply means, that it needs to be parsed or processed by laravel first. Backend is different from frontend. If your way is injecting {{}} via javascript where it will be parsed in the browser and laravel at that time is done parsing, hence, it won't going to work. Know the process brother. — Roljhon
– Roljhon, Commented Aug 22, 2017 at 15:40

Oqhax · Accepted Answer · 2017-08-22 15:45:27Z

1

Please try this:

var image = document.getElementById("imagen_perfil_banner")
image.src=info[13];

You firstly have to save the image in a variable. I hope it helps. Good luck.

edited Aug 22, 2017 at 15:45

answered Aug 22, 2017 at 15:43

Oqhax

4171 gold badge4 silver badges16 bronze badges

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

2 Comments

Roljhon Over a year ago

it does the same thing my friend.

Oqhax Over a year ago

Only trying to help :)

matt · Accepted Answer · 2017-08-22 15:50:12Z

0

Looks like your are using Angular or some similar templating engine like handelbars.js maybe Laravel.

This should work as expected if info[13] is a valid image url:

document.getElementById("imagen_perfil_banner").src = info[13];

The call {{ asset('admin/img/1.jpg') }} is not yet a valid url. You first have to process this as mentioned in the comments above to get the absolute url path of the asset.

You can change an image on the client side like this:

https://jsfiddle.net/0e8u38oo/

Hope this helps :)

edited Aug 22, 2017 at 15:50

answered Aug 22, 2017 at 15:41

matt

896 bronze badges

Collectives™ on Stack Overflow

Changing img src via JavaScript

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related