Generating HTML with strings

Question

I am trying to add an image into HTML. Using the following works:

<img id="image1" src="http://image.jpg" alt=" " width="300" height="300" />

All i want to do is replace the http with a variable so I can call in the website rather than have it be physically inline:

<img id="image1" src=URL alt=" " width="300" height="300" />

Can anyone help?

Leave the src empty, and then in JS, get a reference to the image using id, then simply set src to what you need. — Teemu
– Teemu, Commented Mar 6, 2020 at 9:16
Does this answer your question? Programmatically change the src of an img tag — Stephane Vanraes
– Stephane Vanraes, Commented Mar 6, 2020 at 9:18

iliasse · Accepted Answer · 2020-03-06 09:24:34Z

1

You want to dynamically change your src attribute, here is how to do it :

// we selct the element to change in a variable
var el = document.getElementById("image1");

// we define a new image
var new_url = 'https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcT744-ntmnfTx78ZjYUG9t_SkW-M2JmpJaUr6iYlyhaVzkXT9q2';

// we set the new image
el.setAttribute("src",new_url);

<img id="image1" src="http://image.jpg" alt="nothing to show" width="300" height="300" />

answered Mar 6, 2020 at 9:24

iliasse

2571 silver badge7 bronze badges

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

Comments

as-if-i-code · Accepted Answer · 2020-03-06 10:25:09Z

1

Get the img and set the src:

document.getElementById('image1').src='http://mywebsite.com/image.jpg';

edited Mar 6, 2020 at 10:25

as-if-i-code

2,4051 gold badge13 silver badges22 bronze badges

answered Mar 6, 2020 at 9:19

Adder

5,8982 gold badges35 silver badges60 bronze badges

Comments

IncrediblePony · Accepted Answer · 2020-03-06 09:21:28Z

0

In your html don't set the image source, but still have the img element in the DOM. I.e:

<img id="image1" alt=" " width="300" height="300" />

In your javascript (which should be loaded in the bottom of your <body> tag in your html) you do as follows:

var img1 = document.getElementById('image1');

img1.src = "/some/url/or/file-path/here.jpg"

answered Mar 6, 2020 at 9:21

IncrediblePony

76112 silver badges37 bronze badges

Collectives™ on Stack Overflow

Generating HTML with strings

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related