how to use img tag src with begin <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>";
    }
}