托管 Web 时不会加载图像，但 gif 会在使用来自 Internet 的源时加载-解网

问：

当源是本地存储时，它很好，但当源来自互联网时就不行了。

此 img 在涉及 gif 时有效。

<img width="300" height="200" src="https://static.wikia.nocookie.net/f4a65498-5cd1-434f-8981-dd95d972fe6e/scale-to-width/755" alt="Brook laughing at Sanji after meeting Duval"/>

但是当涉及图片时，它不会加载。

<img width="300" height="500" src="https://static.wikia.nocookie.net/onepiece/images/6/6d/Monkey_D._Luffy_Anime_Post_Timeskip_Infobox.png/revision/latest/scale-to-width-down/239?cb=20200429191518/400" alt="Luffy appearance after time-skip" />

当我在 chrome 上本地打开 html 时，图片确实会加载，但在 VS Code 上预览和托管到 Web 时不会加载。

HTML 图像 src

评论

0赞 Abbas Nabilou 9/30/2023

似乎第二张图片受到服务器的保护，不会受到外部使用和链接的影响！

0赞 aimanakashah 9/30/2023

哦，就是这样，我会尝试使用另一个图像并更新

0赞 aimanakashah 9/30/2023

当我尝试另一个来源时，它确实有效。谢谢！

0赞 Abbas Nabilou 10/1/2023

你上传这些图片是 static.wikia.nocookie.net 自己上传的吗？唯一的原因是跨站点链接保护。因为图像在直接打开时会成功加载。

答：

0赞 Nishant Chhillar 9/30/2023 #1

如果在外部网站上托管的图像遇到持续性问题，并且您可以选择这样做，则下载图像并将其托管在本地服务器或项目中可能是一个很好的解决方案。这是你如何做到的：

下载映像：

访问托管图像的网站。右键单击要使用的图像。选择“将图像另存为...”或类似选项将图像下载到您的计算机。将图像存储在本地：

将下载的图像放在项目文件夹结构中的目录中。如果需要，创建一个新目录，例如“images”或“assets”。更新 HTML 代码：

更新标记的 src 属性，使其指向您下载的映像的本地路径。例如：

<img width="300" height="500" src="images/your-downloaded-image.png" alt="Image Description">

评论

0赞 j08691 9/30/2023

这读起来像是 ChatGPT 的答案

0赞 Oussama Werfelli 10/3/2023

问题是关于来自网络的图像，@aimanakashah遗憾的是它适用于本地图像

上一个：Reactjs/Nodejs/Mongodb：在 img src 中时 Blob url 不起作用

下一个：XWiki livetable EvalError：对 eval（）的调用被 CSP 阻止