当前位置: 首页 > 知识库问答 >
问题:

前端的图片标签如何设置两个地址?如果前者存在就用前者,否则用后者?

印劲
2023-10-27

<img> 标签好像只能指定一个 src

但是我有一个需求,就是如果图片存在我们的oss,就显示我们oss 上的图片;如果oss不存在,就用直接保存的原始来源链接。相当于「备用链接」

所以有什么简单又优雅的方式吗?

并不像让后端判断是否 oss 存在图片,因为这样有点慢

共有2个答案

宰父衡
2023-10-27
<img src="" onerror="this.src='img/error.png'"/>

设置onerror 加载失败会使用这里面的路径替换src

吴峰
2023-10-27

你可以使用 JavaScript 来实现这个需求。你可以在前端检查图片是否存在于 OSS,如果存在则使用 OSS 的 URL,否则使用原始的 URL。

以下是一个示例代码:

<html><body>    <img id="myImage" src="" alt="Image">    <script>        var imageName = 'your-image-name'; // 替换为你的图片名称        var ossUrl = 'your-oss-url'; // 替换为你的 OSS URL        var originalUrl = 'your-original-url'; // 替换为你的原始 URL        // 使用 AJAX 检查图片是否存在于 OSS        var xhr = new XMLHttpRequest();        xhr.open('HEAD', ossUrl + imageName, true);        xhr.onreadystatechange = function() {            if (xhr.readyState == 4 && xhr.status == 200) {                // 如果图片存在于 OSS,则设置 OSS 的 URL 为 src                document.getElementById('myImage').src = ossUrl + imageName;            } else {                // 如果图片不存在于 OSS,则设置原始的 URL 为 src                document.getElementById('myImage').src = originalUrl;            }        };        xhr.send();    </script></body></html>

在这个示例中,我们首先通过 AJAX 发送一个 HEAD 请求到 OSS URL,如果图片存在,服务器会返回一个状态码 200。如果返回的状态码是 200,我们将 OSS 的 URL 设置为 img 标签的 src。否则,我们将原始的 URL 设置为 src。

 类似资料:
  • 当用户在我的网站上注册时,将自动创建一篇文章(在自定义文章类型下),并将用户指定为该文章的作者。这篇文章本质上是用户的“个人资料页面”。 任何用户都可以看到任何其他用户配置文件页面。但是,如果它属于登录用户,我希望在配置文件页面上显示一个按钮。 换句话说:如果登录用户是当前正在查看的帖子的作者(在前端),那么显示按钮。 下面是我最接近我需要做的事情-我创建了一个css id为的按钮,并在默认情况下

  • 如何成为前端开发者? 那么, 怎么才能成为一个前端开发者呢? 这个问题很复杂, 因为直到现在, 你也不能去一所大学获得前端工程师的学位, 并且我也很少听说 或者遇见通过编写专业地 HTML, CSS 和 JavaScript 来获得一个无用的计算机科学学位或平面设计学位. 事实上, 现在的大部分前端 开发者都是通过自学成为开发者和没有经过传统训练的程序员. 为什么会是这种情况呢? 前端开发人员不是

  • 需求是当本地程序请求一个IP地址的时候,映射到另一个ip地址上去。 和DNS不同的是,这里没有解析域名,因此修改hosts不行。 有没有办法或者工具可以做到?

  • css 如何设置背景图片的透明度? 代码类似: 网上了搜了说用 background-color: rgba(255, 255, 255, 0.5); 然而实际并没效果,最后那个数字我即使调到 0 依然没任何效果。 恳请大佬指点,谢谢。

  • 图片宽是1920px,高度100px 在大屏幕下显示为这样: 横向不拉伸,两边就会留白 如果铺满屏幕,那么图片会被裁剪 想要实现的效果是图片高度不变,仅横向拉伸铺满屏幕,请问要使用什么属性设置,或者对于这种标题背景使用什么方式解决?

  • 当前效果:标签文字太靠近中心位置 当前series配置如下 期望实现的效果如下,标签文字虽然在扇区内部,但是更靠近边缘,不会互相遮挡