如何在開始時使用 img 標簽 src <c:url< div><div id="text_translate"><p> 如何在 javascript 源中動態使用帶有 src begin '&lt;'c:url'&gt;' 的 img 標簽</p><p>在 html 源中它運行良好，但在 javascript 源中我不知道如何在字符串中使用 img 標簽</p><p> [html]</p><p> &lt;div&gt; &lt;img src="&lt;c:url value="${contextRoot}/TMP/test1.jpg"/&gt;"&gt; &lt;/div&gt;</p><p> 這個 img 標簽效果很好，</p><p> [javascript]</p><p> var str = "";</p><p> 1) str += "&lt;img src="&lt;c:url value="${contextRoot}/TMP/test1.jpg" /&gt;"&gt;"</p><p> 2) str += "&lt;img src='&lt;c:url value='${contextRoot}/TMP/test1.jpg" /&gt;"&gt;"</p><p> 3) str += "&lt;img src='&lt;c:url value='${contextRoot}/TMP/test1.jpg' /&gt;'&gt;"</p><p> $('#temp').html(str)</p><p> 這些 1),2),3) 來源調用錯誤</p><p>如何修復此來源效果很好</p><p> [javascript函數]</p><p> function fnImageListCallback(json){ var code = json.data.code;</p><pre> if(code == "S") { var list = json.data.list; var listCnt = list.length; var str = ""; var str1 = ""; if(listCnt &gt; 0){ str +="&lt;tr&gt;"; str +="&lt;th scope='row' style='background:#F2F2F2;text-align:center;'&gt;파일이름&lt;/th&gt;"; str +="&lt;th scope='row' style='background:#F2F2F2;text-align:center;'&gt;사진보기&lt;/th&gt;"; str +="&lt;th scope='row' style='background:#F2F2F2;text-align:center;'&gt;삭제&lt;/th&gt;"; str +="&lt;/tr&gt;"; for(var i=0; i &lt; listCnt; i++){ str +="&lt;tr&gt;"; str +="&lt;th scope='row' style='text-align:center;'&gt;"+list[i].photo_nm+"&lt;/th&gt;"; str +="&lt;th scope='row' style='text-align:center;'&gt;&lt;input type='button' value='사진보기'&gt;&lt;/th&gt;"; str +="&lt;th scope='row' style='text-align:center;'&gt;&lt;input type='button' value='삭제'&gt;&lt;/th&gt;"; str +="&lt;/tr&gt;"; str +="&lt;tr&gt;"; str +="&lt;th colspan='3'&gt;&lt;img src='&lt;c:url value='${contextRoot}/asset/"+list[i].photo_nm+" &gt;&lt;/th&gt;"; str +="&lt;/tr&gt;"; } $("#imageList").html(str); } } else { alert("failed"); }</pre><p> } `</p><p> [Thum Choon Tat 方式]</p><p> Chrome 開發者模式顯示</p><p><a href="https://i.stack.imgur.com/2cA16.png" rel="nofollow noreferrer">在此處輸入圖像描述</a></p></div></c:url<>

Question

如何在 javascript 源中動態使用帶有 src begin '<'c:url'>' 的 img 標簽

在 html 源中它運行良好，但在 javascript 源中我不知道如何在字符串中使用 img 標簽

[html]

<div> <img src="<c:url value="${contextRoot}/TMP/test1.jpg"/>"> </div>

這個 img 標簽效果很好，

[javascript]

var str = "";

1) str += "<img src="<c:url value="${contextRoot}/TMP/test1.jpg" />">"

2) str += "<img src='<c:url value='${contextRoot}/TMP/test1.jpg" />">"

3) str += "<img src='<c:url value='${contextRoot}/TMP/test1.jpg' />'>"

$('#temp').html(str)

這些 1),2),3) 來源調用錯誤

如何修復此來源效果很好

[javascript函數]

function fnImageListCallback(json){ var code = json.data.code;

if(code == "S") {
        var list    = json.data.list;
        var listCnt = list.length;
        var str     = "";
        var str1    = "";

        if(listCnt > 0){
            str +="<tr>";
            str +="<th scope='row' style='background:#F2F2F2;text-align:center;'>파일이름</th>";
            str +="<th scope='row' style='background:#F2F2F2;text-align:center;'>사진보기</th>";
            str +="<th scope='row' style='background:#F2F2F2;text-align:center;'>삭제</th>";
            str +="</tr>";

            for(var i=0; i < listCnt; i++){

                str +="<tr>";
                str +="<th scope='row' style='text-align:center;'>"+list[i].photo_nm+"</th>";
                str +="<th scope='row' style='text-align:center;'><input type='button' value='사진보기'></th>";
                str +="<th scope='row' style='text-align:center;'><input type='button' value='삭제'></th>";
                str +="</tr>";      

                str +="<tr>";
                str +="<th colspan='3'><img src='<c:url value='${contextRoot}/asset/"+list[i].photo_nm+" ></th>";
                str +="</tr>";      

            }


            $("#imageList").html(str);
        }



} else {
    alert("failed");
}

} `

[Thum Choon Tat 方式]

Chrome 開發者模式顯示

在此處輸入圖像描述

Answer 1

<c:url>標簽是一個服務器端標簽，服務器端腳本將在您的 JavaScript 之前首先被評估。 解決方法是將變量中的 URL 渲染為模板字符串，並通過 JavaScript replace它

var imgSrcTemplate = '<c:url value="${contextRoot}/asset/_photoNumber_" />';

if(code == "S") {
    var list    = json.data.list;
    var listCnt = list.length;
    var str     = "";

    for( var i = 0; i < listCnt; i++ ) {
        str += "<th colspan='3'><img src=\"" + imgSrcTemplate.replace( "_photoNumber_",  list[i].photo_nm ) + ".jpg\"></th>";
    }
}