img的src如果访问显示403,怎么才能访问第二个链接?

要在 img 元素的 src 属性中实现逻辑,以在无法访问到 403 错误的情况下使用第二个链接,你可以使用 JavaScript 来处理。

**以下是一个示例代码,演示了如何检查第一个链接是否返回 403 错误,并在发生错误时使用第二个链接:**javascript plainconst imgElement = document.querySelector('img');imgElement.addEventListener('error', () => { // 第一个链接返回错误,使用第二个链接 imgElement.src = '第二个链接';});在上述示例中,我们首先使用 document.querySelector('img') 获取到 img 元素。然后,我们通过为 img 元素添加 error **事件监听器来检测第一个链接是否返回错误。当图片加载发生错误时,error 事件会触发回调函数。在回调函数中,我们将 img 元素的 src **属性修改为第二个链接,从而加载第二个图片链接。你需要将代码中的 '第二个链接' **替换为你实际要使用的第二个图片链接。**请注意,这段代码应在页面加载完成后执行,以确保 img 元素已经存在于 DOM 中。你可以将代码放在 DOMContentLoaded load **事件处理程序中,或者在脚本的适当位置执行。**这样,当第一个链接返回 403 错误时,就会自动切换到第二个链接,以确保图片能够正确加载。

相关推荐
To_OC8 分钟前
写了 5 个表单 Demo 后,我终于彻底搞懂了 React 受控与非受控组件
前端·react.js·前端框架
满栀5852 小时前
vue动态路由效果
前端·javascript·vue.js·前端框架·vue
gis开发之家9 小时前
《Vue3 从入门到大神50篇》Vue3 源码详解(二十):生命周期钩子源码解析 —— onMounted / onUpdated 如何实现?
前端·javascript·前端框架·vue3·vue3源码
word9 小时前
从零接入 MCP:把任意工具变成 AI 的能力(协议级实践)
人工智能·前端框架
console.log('npc')10 小时前
Mock 服务设计指南
前端框架·mock·react·visual studio·项目架构
To_OC1 天前
绕开层层 props 搬运:我把 useContext 和自定义 Hook 跑通了
前端·react.js·前端框架
小林ixn1 天前
从混乱到清晰:项目架构与自定义 Hook 的双重实践
react.js·架构·前端框架
小林ixn2 天前
前端卡顿终结者:用 useRef 把 Web Worker 请进 React 项目
前端·react.js·前端框架
触底反弹2 天前
🏗️ 写完 Todos 之后,大型 React 项目的 7 个架构真相
前端·react.js·前端框架
Zzj_tju3 天前
Tool-Using LLM 论文精读路线:从 ReAct 到可验证工具调用
前端·react.js·前端框架