Question

I have a file called src.js which has all the scripts for my html page.

Now on my HTML page I am using this:

<script language="javascript" src="src.js">
</script>

Now what I want to have an image in my html file (<img src=""/>) and the src of that image I want to load form the .js file.

How do I do that?

Answer 1

In the JS file you can select the image element and update it’s source:

document.getElementById('image-id').src = '/path/to/image.jpg';

Then in your HTML:

<img id="image-id" src="/images/blank-pixel.png" />

It is important to set the source of the image to something so the browser doesn’t load unnecessary assets looking for a source that doesn’t exist.

You can also store the path to the image in a data-attribute on the image tag itself and load it from JavaScript:

JS–

var image = document.getElementById('image-id');
image.src = image.getAttribute('data-src');

HTML–

<img id="image-id" data-src="/path/to/image.jpg" src="/images/blank-pixel.png" />