how to add variable in the img src html tag

Question

<script>
var domain_name="www.abc.com"
</script>

<div id="tp_otherinfo" style="top: 558px;">
    <div class="cls_footerImg" id="divFooterMainqqqq">
        <div id="footerimgDiv1">
            <img src=domain_name+"/images/place1a.svg"><span id="id_places" class="clsFooterHead">1 Places</span></div>
        <div class="footerimgDiv2">
            <img src=domain_name+"/images/calendara.svg"><span id="id_days" class="clsFooterHead">3 Days</span></div>
        <div class="footerimgDiv2">
            <img src=domain_name+"/images/photos1a.svg"><span id="id_photos" class="clsFooterHead">8 Photos</span></div>
        <div class="footerimgDiv2">
            <img src=domain_name+"/images/reviews1a.svg"><span id="id_review" class="clsFooterHead">7 Reviews</span></div>
        <div class="footerimgDiv2">
            <img src=domain_name+"/images/timea.svg"><span id="id_date" class="clsFooterHead">6th February 2014</span></div>
    </div>
</div>

I want to add a variable in img src. I have many img src like this ..i cant keep on changing the domain change so i wanted to add a variable in place of relative image path

Answer 1

You can use below work around to replace your domain_name for src attributes.

First correct your markup and put src value with domain_name in double quotes like below

<img src="domain_name/images/place1a.svg">

Use jQuery to replace all domain_name with variable value -

<script>
var domain_name="www.abc.com"

    $(function(){
       $('#tp_otherinfo').find('img').each(function(){
           var srcpath = $(this).attr('src');
           srcpath = srcpath.replace('domain_name',domain_name);
           $(this).attr('src',srcpath);
       });
    });
</script>

Answer 2

If you are using Razor Engine you can write it like this:

@{ string domain_name = "www.abc.com"; }

....

<img src="@domain_name/images/etc."

Answer 3

Here is for php language. You can write your div in html, and inside img tag place like this.

 <?php echo "http://" . $_SERVER['SERVER_NAME'] ."and here you add your image.png or whatever" ?>

Answer 4

try this :

<script>
    //have an array with all the domains
var domain_names = ["domain1.com", "domain2.com", "domain3.com", "domain4.com", "domain5.com", "domain6.com", "domain7.com"];
//now set them
$(document).ready(function () {
    var i = 0;
    $("#tp_otherinfo img").each(function () {
        var src = $(this).attr('src');
        src = domain_names[i] + src;
        $(this).attr('src', src);
        i++;
    });
});
</script>

<div id="tp_otherinfo" style="top: 558px;">
    <div class="cls_footerImg" id="divFooterMainqqqq">
        <div id="footerimgDiv1">
            <img src="/images/place1a.svg"><span id="id_places" class="clsFooterHead">1 Places</span>
        </div>
        <div class="footerimgDiv2">
            <img src="/images/calendara.svg"><span id="id_days" class="clsFooterHead">3 Days</span>
        </div>
        <div class="footerimgDiv2">
            <img src="/images/photos1a.svg"><span id="id_photos" class="clsFooterHead">8 Photos</span>
        </div>
        <div class="footerimgDiv2">
            <img src="/images/reviews1a.svg"><span id="id_review" class="clsFooterHead">7 Reviews</span>
        </div>
        <div class="footerimgDiv2">
            <img src="/images/timea.svg"><span id="id_date" class="clsFooterHead">6th February 2014</span>
        </div>
    </div>
</div>