如何解决Vue无法显示网络图片的问题

x33g5p2x  于2022-02-12 转载在 Vue.js  
字(0.7k)|赞(0)|评价(0)|浏览(473)

缘由

因为项目需求,项目中引用了图片的网络链接,但是发现了很奇怪的问题,图片链接如果在浏览器的地址栏中可以直接打开,如果在前端项目的Img标签中却无法被渲染。

如何解决

在vue项目中的头部添加meta标签

在index.html中添加:<meta name="referrer" content="no-referrer">
或者在img标签中添加:<img referrerpolicy="no-referrer" src="xx"/>

Referrer是什么

  • Referer是http请求header的一部分,当浏览器向Web服务器发送请求的时候,请求头信息一般包含referer。该属性的作用就是告诉服务器这个链接是从哪个页面链接过来的,服务器就可以基于此信息进行处理。

Referre作用

  • 防盗链:顾名思义就是防止别人复制链接盗取资源,原理就是,服务器再接受访问静态资源的请求时,会判断Referer值是否是自己的网站地址。
  • 防止恶意请求:比如静态请求是.html结尾的,动态请求是.shtml,那么所有的*.shtml请求,必须 Referer为我自己的网站才可以访问,这就是Referer的作用。

防盗链的两种方式

  • 允许空Referrer:允许Referer为空,意味着你允许比如浏览器直接访问,就是空。
  • 不允许空Referer:意味着,发送请求必须携带referrer属性。

最后

所以,只要能在浏览器中打开的网络链接图片,其网站设置的防盗链就是允许为空的Referrer。
建议使用

这种方式渲染网络图片,如果是在vue项目中的meta属性中,添加可能会影响项目的其他请求。

相关文章

最新文章

更多