JavaScript "<SCRIPT>" in Image src attribute

Question

So I have the following JavaScript function.

var LogoUrl = function() {
    document.write('views/img/common/site-logo.svg');
}

And I want to have this function used in a html img src attribute.

Here is a example though this syntax wouldn't work, it should give you an idea of what I am looking for.

<img class="site-logo" src="<script> LogoUrl() </script>" alt="Site Logo">

And hoping this would export the following in the browser

<img class="site-logo" src="views/img/common/site-logo.svg" alt="Site Logo">

What is the best approach to doing this?

Learn basic html. src is required to be a URI. You can't just dump OTHER html into any place you want and expect it to work. If you want to dynamically change the src of an image, then you'll have to run that code ELSEWHERE and find the image in the DOM, then fiddle with that DOM element's src attribute. — Marc B
– Marc B, Commented Jun 10, 2014 at 22:11

Joeytje50 · Accepted Answer · 2014-06-10 22:18:26Z

2

You can do this with the following instead:

<script>
    document.write('<img class="site-logo" src="' + 'views/img/common/site-logo.svg' + '" alt="Site Logo">');
</script>

Since the script tag is indeed a tag, you can't put it inside the attributes of another tag.

A much better approach however would be the following:

Prepare a span element for the element to appear in, and give it a specific id. This would be your HTML:

This is my image: <span id="myImg"></span>.

and this will be your jQuery code:

$(function() {
    $('<img>').class('site-logo')
        .attr('src', 'views/img/common/site-logo.svg')
        .attr('alt', 'Site Logo')
        .appendTo('#myImg');
});

Alternatively, instead of preparing a span, you could prepare the image without defining a src attribute, with the following HTML:

This is my image: <img id="myImg" class="site-logo" alt="Site Logo">.

and the following jQuery code:

$(function() {
    $('#myImg').attr('src', 'views/img/common/site-logo.svg');
});

edited Jun 10, 2014 at 22:18

answered Jun 10, 2014 at 22:11

Joeytje50

19.2k15 gold badges69 silver badges99 bronze badges

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

2 Comments

kevingilbert100 Over a year ago

Hmm but the framework I'm developing around my application I was hoping it to be flexible where it didn't have to create the entire element with the function. I had already thought of that. You think that's the best option?

Joeytje50 Over a year ago

I think either of my placeholder solutions is the best solution. The document.write solution is generally not as good as simply modifying the DOM. I personally always avoid document.write, because it can sometimes have unwanted effects (running document.write after the DOM tree has loaded will cause the whole page to be blanked).

Kamrul · Accepted Answer · 2014-06-10 22:14:12Z

1

You can use jquery $(document).ready() to set the image src.

$(document).ready(function (){
        $('img.site-logo').attr('src', 'views/img/common/site-logo.svg');
      });

answered Jun 10, 2014 at 22:14

Kamrul

7,3213 gold badges34 silver badges31 bronze badges

Comments

andyw_ · Accepted Answer · 2015-07-14 13:42:10Z

0

You could do this - but this makes it obstructive.

<script>document.write("<img class=\"site-logo\" src=\"views/img/common/site-logo.svg\" alt=\"Site Logo\">")</script>

It is also not very organised because it ties everything so much with the markup that you might as well just have it as markup.

You're better off doing it properly by changing the src property

var logo = document.getElementsByClassName('site-logo')[0];
logo.src = 'http://www.develop.com/Images/v3/tech-symbols/angularjs_logo.png';

demo here http://jsfiddle.net/andyw_/XxTuA/268/

If this is all you need to do - I don't think it justifies the use of a selector library or front-end framework.

edited Jul 14, 2015 at 13:42

answered Jun 10, 2014 at 22:18

andyw_

5005 silver badges15 bronze badges

Collectives™ on Stack Overflow

JavaScript "<SCRIPT>" in Image src attribute

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related