vue中img使用网络地址src，https、http均显示不出图片，一行代码解决

最新推荐文章于 2025-06-26 10:18:47 发布

原创最新推荐文章于 2025-06-26 10:18:47 发布 · 1.5w 阅读

20 ·

CC 4.0 BY-SA版权

文章标签：

#vue #html

Vue 专栏收录该内容

23 篇文章

订阅专栏

本文介绍了解决Vue项目中图片无法正常加载显示的问题，并提供了一种在public文件夹内的html头部加入特定元信息的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!--vue中使用-->
<img 
src="https://img.ivsky.com/img/tupian/pre/202004/18/hongchanhua-001.jpg" 
alt="" style="width: 100%;height: 300px">
<!--图片不显示-->

在public中的html中，header内加上:

<meta name="referrer" content="no-referrer">

即可，一种策略，原理没大明白，有知道的大佬望指教
如果对你有帮助，点个赞，收藏一下吧~~~~~~~~~~~~

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

宁长风

关注关注

5
点赞
踩
20

收藏

觉得还不错? 一键收藏
11
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

vue3--实现瀑布流-长列表-懒加载

小白小白从不日别的博客

10-21

1470

在这一章我们主要学习：瀑布流、长列表、懒加载等功能瀑布流是一个比较复杂的通用组件，因为我们要尽量做到普适，所以就需要考虑到各种场景下的处理方案，尽量可以满足日常开发的场景，所以这就在原本就复杂的前提下，让这个功能变得更加复杂了。

vue3+vite项目，动态svg build后，线上找不到图片问题

qq_41261490的博客

06-20

3916

好多时候，我们使用是svg都是动态的，就会有不同的src，这时，src就需要是一个动态的变量。我们按常规配置：模板使用上面这样使用，在本地都是找不到文件的。但是直接在模板中这样使用是可以的这是因为，把变量解析成了字符串，没有按路径去查找。模板使用上述这样使用，在本地是没有问题的，但是部署到线上就找不到了，查看源代码，线上把src最终解析成了[Object Object],可见打包后，没有去解析出真正的路径。费了老半天劲，各种方式去试过，最后在vite文档中找到了答案； URL方式，不能使用模板

11 条评论您还未登录，请先登录后发表或查看评论

解决vue项目里面，img标签加载不出网络图片

最新发布

qq_53245353的博客

06-26

435

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

vue 使用 el-image图片无法显示

weixin_43966635的博客

10-19

1万+

问题：在vue 项目中使用 el-image 后，在图片路径无误的情况下显示图片加载失败 <el-carousel trigger="click" :height="carouselHeight"> <el-image src="images/top1.jpg" fit="fill" style="height:100%;width:100%"></el-image> </el-carousel> 原因分析：通过图片的请求可知，在elemen

vue 改成https访问后台识别不到是https访问_Vue实战——vue+router+vuex导航守卫进行身份验证...

weixin_42715608的博客

02-04

1536

上文说到了vuex的状态管理集成，本文将分享，news-list项目中添加登录页面，并如何利用之前说的导航守卫，状态管理进行访问身份验证。本项目代码git地址：https://gitee.com/vuejslearn/news-list.git首先，在views目录下增加登录页面login.vue 登录页面然后，修改路由文件。1.增加登录路由：{ path: '/login', name: '...

vue中img标签src使用https网络地址，图片无法显示问题

weixin_50083085的博客

07-14

2600

vue中img标签src使用https网络地址，图片无法显示问题

img标签中src使用网络地址 图片不显示

我的博客

03-02

6961

图片链接在浏览器地址栏直接打开就正常显示，但放在img标签的src里，浏览器却加载不出来

vue-img标签src使用https网络地址展示图片时无法显示

minionsH的博客

05-10

2212

在\public\index.html的head里面添加 <meta name="referrer" content="no-referrer">

【若依框架】代码生成详细教程，15分钟搭建Springboot+Vue3前后端分离项目，基于Mysql8数据库和Redis5，管理后台前端基于Vue3和Element Plus，开发小程序数据后台

热门推荐

编程小石头

06-25

8万+

今天我们来借助若依来快速的搭建一个基于springboot的Java管理后台，后台网页使用vue3和 Element Plus来快速搭建。

Vue-cli 项目使用 iconfont svg 不显示

Irene1991的博客

01-14

2220

Vue-cli 项目使用 iconfont svg 不显示怎么办，主要讲配置的问题。

vue-cli3开发使用jQuery插件完成一键导出Word功能（纯前端）

m0_48940868的博客

04-06

963

前言：最近在做一个【生成报告类的系统】，其中最核心的功能就是“如何一键生成报告” 为了解决这一难题，博主采取了很多方案，也参考了网上的文章，无奈的是，很多文章说的不够仔细、清楚，看了半天收获也不是很大。对此，我想通过这篇文章总结下，也是互相分享学习。一般来说，完成导出Word这一功能多多少少都需要后端的支持，网上大致的思路有如下几种：安装四个依赖包，自己规定模板类使用在线导出工具（建议不要去用，商用的，仅做参考）百度模板类（这种个人觉得相对复杂点，博主没怎么看过）使用jQuery插件——Wo

【vue】v-html中图片不展示，路径也是绝对路径https的

jieweiwujie的博客

01-10

1598

vue中http地址img无法显示问题

m0_49789433的博客

08-26

2626

<img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic3.16pic.com%2F00%2F34%2F99%2F16pic_3499409_b.jpg&refer=http%3A%2F%2Fpic3.16pic.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1632538892&t=2e.

vue中img动态绑定src(网络图片https,http)

weixin_43608950的博客

04-28

6478

vue中img动态绑定src(网络图片https,http)

vuejs绑定img 的src

weixin_34309435的博客

06-22

753

1.显示本地图片： <img src="../../common/images/auth-icon.png" /> 2.绑定变量： <img class="" :src="defaultIcon" /> data() { 　　return { 　　defaultIcon: require("../../common/images/merchant-po...

vue img标签src使用网络地址展示图片无法显示

以爱护甲,爱满枫林。

02-27

3059

referrer，一种引用策略，可以用来防止图片或视频被盗。它的原理是：http 协议中，如果从一个网页跳到另一个网页，http 头字段里面会带个 Referrer。图片服务器通过检测 Referrer 是否来自规定域名，来进行防盗链。如果没有设置referrer，那就可以直接绕过防盗链机制，直接使用或盗取。解决办法，在index.html头部添加meta标签商业转载请联系作者获得授权，非商业转载请注明出处。

vue :src 动态引入一直出错导致本地图片一直没办法显示

weixin_51357044的博客

11-27

1589

这个buff也是让我头疼不已，最近公司这边配合Vue+nodejs写了一个框架，思路是这样子的利用element的upload上传发送file去到nodejs，然后把图片保存到本地返回链接到前端。这时候vue就不显示了。 var path = ../../"+e.data.url// 进行拼装链接 // 赋值新的数据 let obj = { name:e.data.name, url:path } // 进行 push this.fileList.push(obj) 然后很明显出现了错误。图片

解决在vue中img标签不显示图片的问题

munangs的博客

08-10

4903

解决在vue中img标签不显示图片的问题

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

hello world ！

08-22

7280

缘由因为项目需求，项目中引用了图片的网络链接，但是发现了很奇怪的问题，图片链接如果在浏览器的地址栏中可以直接打开，如果在前端项目的Img标签中却无法被渲染。如何解决在vue项目中的头部添加meta标签在index.html中添加：<meta name="referrer" content="no-referrer"> 或者在img标签中添加：<img referrerpolicy="no-referrer" src="xx"/> Referrer是什么 Referer是h