如何在img src html標簽中添加變量

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>

我想在img src中添加一個變量。 我有很多這樣的img src ..我無法繼續更改域更改，因此我想添加一個變量來代替相對圖像路徑

Answer 1

您可以使用以下解決方法來將您的domain_name替換為src屬性。

首先更正您的標記並將src值和domain_name放在雙引號中，如下

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

使用jQuery將所有domain_name替換為變量值-

<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

如果您使用的是Razor Engine，則可以這樣編寫：

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

....

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

Answer 3

這是PHP語言。 您可以將div用html編寫，並在img標記內放置這樣的代碼。

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

Answer 4

嘗試這個 ：

<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>