如何在开始时使用 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

how to use img tag with src begin '<'c:url'>' in javascript source dynamically

in html source it works well but in javascript source I dont know how to use img tag in string

[html]

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

this img tag works well,

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

these 1),2),3) sources call error

how to fix this source works well

[javascript function]

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

Chrome developer mode show that

enter image description here

Answer 1

<c:url> tag is a server-side tag and server-side script will be evaluated first before your JavaScript does. A workaround on this will be rendering the URL in a variable as the template string and replace it via JavaScript

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>";
    }
}