如果文件存在则更改图像源答案

【问题标题】：Change image source if file exists如果文件存在则更改图像源
【发布时间】：2011-08-06 10:33:13
【问题描述】：

重点是我将拥有许多这样的inlinediv div。每个里面有 2 个 div，一个包含图像，一个包含链接。这些是从另一个站点上的子站点列表动态生成的。

我希望它用inlinediv 类检查每个 div。获取 div iconLinkText 中链接的内部文本并在站点上搜索具有该名称的文件。（http://www.mojopin.co.uk/images/ 用于此测试。）如果存在，则将图像 src 更改为它。

我可能为此采取了绝对错误的路线，但我似乎无法让它发挥作用。测试时甚至找不到inlinediv div！说它是空的。

我对 jQuery 很陌生，但有人有什么建议吗？（我什至不知道我是否解释得很好！）

【问题讨论】：

您的直接问题是您在小提琴上使用了 Mootools。您需要从 Framework 下拉菜单中选择要使用的 jQuery 版本。
>:( 不知道为什么会改变。干杯。我现在有更多工作要做！

标签： javascript jquery

【解决方案1】：

同源策略可防止您向其他域发出 AJAX 请求。除非您在“http://www.mojopin.co.uk”上运行此代码，否则此代码将不起作用。

【讨论】：

啊，好吧，那么检查文件是否存在的最佳方法是什么？此外，它似乎无法找到inlinediv！
插入一个 IMG 标签并连接一个 onload 事件。然后将图像的 SRC 设置为您正在测试的图像。如果它在几秒钟内没有出现，它可能不存在。
我不明白，我想如果图像不存在就使用默认图像，但是如果它存在就使用它。我已经完成了剩下的工作，只需要检查是否存在。

【解决方案2】：

你不能只用 jQuery 解决这个问题：Same Origin Policy 不允许你向第三个网站发出请求。

最简单的解决方案是在您的服务器上实现一个服务，将请求代理到外部网站。

基本上，如果您的网站在

http://www.foo.bar

然后你创建

http://www.foo.bar/scheckscript.php（例如）

你可以用你需要的url查询

http://www.foo.bar/scheckscript.php?url=http%3A//www.third.com

【讨论】：

【解决方案3】：

您不必使用 AJAX 来执行此操作，因为您可以不受任何限制地热链接来自其他域的图像。以下是检查图像是否存在的方法：

function checkImage(src) {
  var img = new Image();
  img.onload = function() {
    // code to set the src on success
  };
  img.onerror = function() {
    // doesn't exist or error loading
  };

  img.src = src; // fires off loading of image
}

这是一个有效的实现http://jsfiddle.net/jeeah/

【讨论】：

真的很方便！ Tho 向控制台抛出“找不到资源”错误。
类似问题的其他各种“重复”答案对我来说效果不如这个。一些 AJAX 驱动的方法在 Firefox 中导致了 NS_ERROR_FAILURE，这个没有。谢谢！

【解决方案4】：

这是一种现代的基于 Promise 的方式，它将返回一个带有布尔值的 Promise。

function imageExists(src) {
    return new Promise((resolve, reject) => {
      var img = new Image();
      img.onload = function () {
        resolve(true);
      }
      img.onerror = function (error) {
        resolve(false);
      }
      img.src = src;
    })
}


const imagePath = "http://www.google.com/images/logo_sm.gif";
imageExists(imagePath).then(doesExist => {
  console.log('doesImageExist', doesExist);
});

您当然可以为此使用 async/await 语法。

const doesImageExist = await imageExists(imagePath);

【讨论】：