JS 如果图像存在，显示它。否则，显示文本[重复]答案

【问题标题】：JS if image exists, display it. Otherwise, display text [duplicate]JS 如果图像存在，显示它。否则，显示文本[重复]
【发布时间】：2015-07-17 03:24:32
【问题描述】：

我正在尝试创建一个脚本来检查徽标是否存在。如果没有，我想使用innerHTML 来输出公司名称。

$.get(firmlogo)
    .done(function() { 
        document.getElementById('firmlogo').innerHTML = "<img src="+logooffirm+">";

    }).fail(function() { 
        document.getElementById('firmlogo').innerHTML = "<h2>"+nameoffirm+"</h2>";

    })

它现在显示文本，即使徽标在那里。我得到的错误是：

加载资源失败：服务器响应状态为 404（未找到） http://www.example.com/[object%20HTMLDivElement]资源加载失败：服务器响应状态为404（未找到）

关于我做错了什么有什么想法吗？

【问题讨论】：

您的 firmlogo 是对 div 对象的引用，而不是实际的 URL
您是否设置了服务器路由来处理 get 请求？
你为什么不用alt？
firmlogo 是什么，这是与 get 位于同一域中的图像的 url 路径吗？
是的，正是@Huangism

标签： javascript jquery innerhtml

【解决方案1】：

您正在重新发明轮子。 HTML 已内置此功能。

&lt;h2&gt;&lt;img src="bad_address" alt="Display this text instead" /&gt;&lt;/h2&gt;

【讨论】：

唯一的问题是你得到了 alt 文本周围的图像框

【解决方案2】：

您可以使用alt 来执行此操作，而无需使用所有这些东西。如果您想检查图像是否在某个 url 中可用，请使用此代码。

var image = new Image(); 
image.src = "img.jpg";
if (image.width == 0) {
  console.log("no image");
}
else console.log("image available");

或者你可以使用ajax方式

$.ajax({
    url: "img.jpg",
    type: "HEAD",
    error: function () { console.log("no image"); },
success:function(){console.log("image available");}

});

【讨论】：