如何在JavaScript中修改URL(网址),如果该URL不存在?

3
我正在加载一组扩展名为.jpg的图像,但其中一些图像实际上是.png文件。
我想使用replace方法更改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://dev59.com/fWgu5IYBdhLWcg3w_b9V#10926978,所以我试图创建其他函数来获取修改后的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。如果JavaScript中的URL不存在,我该如何修改URL?

1个回答

2

处理带错误的URL,可以使用以下方法:

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

非常好。谢谢。 - Ramiro Tormenta

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接