javascript - 当损坏的 url 不存在时，如何用默认值替换损坏的 img url

Question

我正在制作一个搜索工具，公司的所有员工都可以在其中找到他们的名字。这些值是使用 json 检索的。 (这包括指向员工图像的链接)。

我的问题。有时链接不存在(由于自动生成，来自其他系统的错误输入)。如果是这样，我想用默认图像替换图像。我如何检查图像链接是否不存在/错误？

    for ( i = 0; i < totalResultsToShow; i++) {
        //when the photoURL isn't given     
        if (searchResults[i].photoURL == "") {
            searchResults[i].photoURL = imagesURL + "silhouette.jpg";
        }
        //when the photoURL doesn't exists

        //do something??

        HTMLContent += "<div class=resultTableRow id=" + i + " onclick=resultClicked(" + i + ");>";
        HTMLContent += "<div class=resultTableItemImage><img width ='" + resultsImageWidth + "' src='" + searchResults[i].photoURL + "' class=stretchWidth /></div>";
        HTMLContent += "<div class=resultTableItemUser><p>" + searchResults[i].user + "</p></div>"
        HTMLContent += "<div class=resultTableItemUsername><p>" + searchResults[i].username + "</p></div>"
        HTMLContent += "</div>"; "</div>";
    }
//put results on screen

我认为一种解决方案是将图像代码放在 try/catch block 中。但我个人不喜欢 try/catch block 。

[编辑 1]我同意你关于检查是否存在和未定义的看法。只有链接确实存在于结果数组中。但它是一个损坏的链接。在将链接添加到 Javascript 中的 html 之前，有什么方法可以检查链接吗？

[编辑 2]我得到的错误是:GET http://....../---.jpg 404 (Not Found)

[解决方案] 注意 onerror=this.src='"+imagesURL+"/silhouette.jpg'

HTMLContent += "<div class=resultTableItemImage><img width ='" + resultsImageWidth + "' src='" + searchResults[i].photoURL + "' class=stretchWidth onerror=this.src='"+imagesURL+"/silhouette.jpg' /></div>"; 

感谢

Answer 1

if (typeof searchResults[i].photoURL === "undefined") {
    searchResults[i].photoURL = imagesURL + "silhouette.jpg";
}