如果URL不存在,如何修改javascript中的URL?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (1)
  • 关注 (0)
  • 查看 (101)

我正在加载一组带有.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//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。如果不存在,我怎么能修改javascript中的URL?

提问于
用户回答回答于

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

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

热门问答

腾讯会议共享屏幕,其他人收到的是黑屏?

腾讯云音视频 支持 移动端h5吗( 不是小程序的)?

shixin

腾讯 · 高级产品经理 (已认证)

推荐

实时音视频TRTC的Web版是基于WebRTC的方案,需要浏览器的对WebRTC的支持,支持WebRTC的浏览器就可以。但是,移动端浏览器对WebRTC支持的情况并不好,建议使用小程序版。

腾讯云IoT物联平台中如何自定义Topic?

DylanRichard

腾讯 · 产品经理 (已认证)

万物互联的时代,欢迎来到IoT的世界
推荐已采纳
第二个是物联网通信平台(IoT Hub)的,https://cloud.tencent.com/document/product/634/32546。目前物联网开发平台(IoT explorer)只支持基于数据模板协议的接入(文档 https://cloud.tencent.co...... 展开详请

如何用命令修改腾讯云解析目标ip?

氧化先生道可道 非常道 名可名 非常名
推荐
可以,参考: https://cns.api.qcloud.com/v2/index.php? &<公共请求参数> &Action=RecordCreate &domain=qcloud.com &subDomain=www &recordType=A &recordLine=默...... 展开详请

组队匹配完整流程是怎样的?感觉缺少API支持?

您好,matchgroup匹配成功后,小组成员会进入同一个房间和同一个队伍,这个API需要传玩家ID,通过邀请好友进房间就能拿到玩家的id,解散房间后再调用matchgroup,在没有解散房间不能调用matchGroup 接口。

SCF使用了k8s或docker容器技术吗?

Mason-Serverless

腾讯 · 产品经理 (已认证)

推荐

SCF的新架构使用的轻量化虚拟机技术,同时MVM里内嵌的有docker,但是没有使用K8S

所属标签

扫码关注云+社区

领取腾讯云代金券