javascript - 如果不存在，如何在javascript中修改URL？

Question

我正在加载一组扩展名为 .jpg 的图像，但其中一些图像实际上是一个 .png 文件。

我想使用替换方法更改 URL，以便将 url 字符串从 .jpg 更新为 .png 以避免 404 错误状态。

此图像仅使用 javascript 呈现 html 模板。

我遵循了接下来的步骤:

1

正在尝试使用 || 运算符加载图像。

module.exports = (data) => {
  return `
    <img class='img-circle' src='${data.metadata.image || data.metadata.image.replace('.jpg', '.png'}' />
  `
}

2

我找到了 url-exists 包。所以我尝试创建一个函数来检查 url 是否存在，如果不存在，则替换图像扩展名

const urlExists = require('url-exists')
module.exports = (data) => {
  // function
  function updateUrl (url) {
    urlExists(url, (err, res) => {
      if (res === true) {
        return url
      } else {
        return url.replace('.jpg', '.png')
      }
    })
  }
  return `
    <img class='img-circle' src='${updateUrl(data.metadata.image)} />
  `
}

3

我发现这个检测 URL 是否存在的答案:https://stackoverflow.com/a/10926978/6005062 ，所以我尝试创建其他函数来检索修改了 URL 的响应

module.exports = (data) => {
  // function
  function updateUrl (url) {
    let request = new XMLHttpRequest()
    request.open('GET', url, true)
    request.onreadystatechange = function() {
      if (request.readyState === 4) {
        if (request.status === 404) {
          url = url.replace('.jpg', '.png')
        }
      }
    }
    return url
  }
  return `
    <img class='img-circle' src='${updateUrl(data.metadata.image)}' />
  `
}

这些方法中的任何一个都会显示新的 URL。如果 URL 不存在，如何修改 javascript 中的 URL？

Answer 1

要处理错误的 url，你可以使用它

 <img class='img-circle' src='${updateUrl(data.metadata.image)}  onerror="this.src='NEW-URL'"/>