如何使用带有 begin <c:url 的 img 标签 src

Question

如何在 javascript 源代码中动态使用带有 src begin '' 的 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 开发者模式显示

enter image description here

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