图像没有显示在网页中，即使它是单独打开的答案

【问题标题】：Image is not showing in the web page even though it is opened separately图像没有显示在网页中，即使它是单独打开的
【发布时间】：2021-10-12 09:51:02
【问题描述】：

我有几张来自外部网站的图片，例如：http://static.wikia.nocookie.net/mightandmagic/images/8/8e/Urgashtcm1962285.png/revision/latest?cb=20150307173959&path-prefix=en

当我在单独的选项卡中打开它时可以访问它，但是当我想使用 > 它给出了 404 not found 错误。可能是什么原因造成的？

这里是 vue html 代码：

<img v-bind:src="e.smallImage"
              @mouseover="mouseOver($event,e)" @mouseleave="mouseLeave($event,e)">

这是渲染页面中的 html 代码：

<div id="48807" class="entity">
<a href="#">
    <figure>
        <img src="http://static.wikia.nocookie.net/mightandmagic/images/8/8e/Urgashtcm1962285.png/revision/latest?cb=20150307173959&amp;path-prefix=en" style="display: inline-block; width: 179.391px; height: 103.266px; margin-left: 0px; margin-top: 0px;">
        <figcaption>Urgash (M&amp;M)</figcaption>
    </figure>
</a>
</div>

此外，还有来自不同来源的其他图像，包括我的本地计算机和其他网站，但它们已显示。这是其中之一：https://i.ibb.co/XYzswZC/Hogwartscrest.png

编辑：我通过将 referrerPolicy 属性添加到我的答案中描述的 img 元素来解决它，但它只有在我硬重新加载页面时才能正常工作。如果我在开发人员工具中检查网络选项卡时通常重新加载页面，我会看到它再次使用 Referrer-Policy 发出请求：strict-origin-when-cross-origin 并且它忽略了 img 元素中的 referrerPolicy 属性。有没有办法让它在每次页面加载时都使用无推荐人策略发送？

【问题讨论】：

请在minimal reproducable example 中添加更多详细信息，例如html 和css，最多在stack snippet 中。见how to ask
造成这种情况的原因通常是 SSL。如果您的网站是通过 https 提供的，并且您通过 http 加载外部图像，则它们可能不会显示。检查为您的浏览器设置的开发人员工具集，您应该会在那里看到错误。
我编辑了这个问题。我都尝试了我想用 http 和 https 显示的图像的 url，都给出了 404 错误。如何在 Chrome 上查看开发者工具集？
要查看 chrome 上的开发人员工具，只需打开页面，右键单击并打开“检查”。他们浏览不同的日志以检查错误，“控制台应该是正确的。不过你可能需要重新加载页面。抱歉，我刚刚意识到你解决了这个问题。

标签： html image vue.js

【解决方案1】：

所以，这是因为 img 是使用标题“Referrer-Policy: strict-origin-when-cross-origin”请求的，并且由于我添加了 cors 安全性而返回 404 referrerPolicy="no-referrer" em> 到我的 img 元素，它得到了解决。

注意：顺便说一句，感谢 -1，我认为这是一个很好的问题。

编辑：它导致图像在初始加载时加载而没有缓存，并且不会在以下加载中加载。我通过将 crossorigin="anonymous" 属性添加到我的 img 元素来解决它。

【讨论】：