How to document.write() within an image src string? Doesn't get parsed

Question

This is for a Javascript application that is only intended to run on a local machine, accessing many large image files from local disk.

Original code like this:

<script>
// Constants, var inits, etc.
</script>

<-- Then html stuff including some control buttons, each one like this -->
<img id="pgb_runStop" onclick="click_runStop()" src="buttons/but_run.png">

<--then a chunk of javascript related to the buttons -->

The thing works OK, see http://everist.org/NobLog/20150424_js_animated_gallery.htm

Now I want to extend it, so all image pathnames are defined as js constants and vars. Some will remain fixed during lifetime of the browser page, others will change by user actions. I'm stuck with one part of this. How to get the html parser to pay attention to script blocks WITHIN <img .... > statements?

Specifically, I want to do a document.write() within the image src string.

Like: <img src="<script>document.write(B_PATH)</script>something.png">

This is for the initial page display. The images later get changed by scripts, and that's working OK.

But the html parser doesn't seem to notice scripts inside html elements.

I'm a javascript nubie, so I may have some stupid misconception of how it all works. Am I just doing it wrong, or is this fundamentally impossible due to reasons?

Here's an example:

<script>
// Constants
PGL_BUT_PATH = "buttons/"      // where the button images etc are.
</script>

<-- some html stuff -->

<-- including some control buttons, each one like this -->
<img id="pgb_runStop" onclick="click_runStop()"
src="<script>document.write(PGL_BUT_PATH);</script>but_run.png">

<--then a chunk of javascript related to the buttons -->

In debugger, the img element appears as:

  <img id="pgb_runStop" onclick="click_runStop()"
  src="<script>document.write(PGL_BUT_PATH);</script>but_run.png"/>

The intent was to get this:

  <img id="pgb_runStop" onclick="click_runStop()"
  src="buttons/but_run.png"/>

I could just give up with trying to have the page initially render with the correct buttons, and have js correct them afterwards. I'm just surprised... Isn't it possible to evaluate js constants during initial html parsing to construct the DOM, in this way?

Edit to add: Sorry, I wasn't clear enough in the question. What I want is a way for js to make the html content/DOM correct (per js config values that get defined very early on) BEFORE the page first renders. To avoid any flicker or resizings after first render.

So another solution would be to delay the first page render till after some scripts have run, so they can make initial DOM adjustments before the user sees anything. Any way to do that? Hmmm... actually that would solve another problem I have. I'll try searching for that.

The semantic templating tools suggest are interesting (had never heard of it. http://www.martin-brennan.com/semantic-templates-with-mustache-js-and-handlebars-js/ ) but am I correct that all such scripting add-ons will execute after the page first renders?

Answer 1

You cannot embed a tag within another tag's attribute. So you cannot embed a <script> inside the src of an <img>. That's just invalid won't-be-parsed HTML.

What you can do, though, is write the attribute after the fact:

<img id="uniqueId">

<script>
    var img = document.getElementById('uniqueId')
    img.setAttribute('src', PGL_BUT_PATH)
</script>

The <img> tag without a src attribute in that is invalid HTML technically, although it will probably work in any browser anyway. But if you want to stay totally legit, create the <img> with JavaScript too.

<div id="uniqueId"></div>

<script>
    var elem = document.getElementById('uniqueId');
    var img = document.createElement('img');
    img.setAttribute('src', PGL_BUT_PATH);
    elem.appendChild(img);
</script>