Set img src without issuing a request

As part of building a code to copy and paste, we had to use a dom element that we appended text / other dom elements into it, and in the end the result would be code to copy.

However, when appending image elements, the browser always issues a request for the image src.

Is there any way around it?

i.e.

var img = document.createElement('img');
img.src = 'http://dummy.com';

without the browser firing a request to dummy.com?

The reason I am asking is I have a template, that looks something like this:

<div class="container">
    <div class="items-container">
       <generated tags here>
    </div>
</div>

Where generated tags are with img inside.

I was trying to append the a tags with the image inside and get the HTML so I can give it to the user to use it on their email campaigns.

But I guess it’s just not supported.

I ended up adding {{token}} instead of the real html, and then used strings (ugly, but worked)

Answer

After some more research, it seems like it’s impossible, unless there is a browser API I am missing.

Any new Image tag with src will result in a request going out from the browser, even if it’s just in memory, or wrapped in a code block.

Advertisement

Answer