Vue src动态引入图片不显示问题
使用vue动态引入图片显示失败,查看控制台,发现图片返回类型为
text/html,这里我的图片是从后台服务器上获取的,如果你没有使用Vue的devServer.proxy 进行代理,可以光速移步百度
问题解决

这里是scope是我从后端获取的图片的地址,由于我使用了vue的代理:

这里请求的图片的地址还是本机端口上,没有转发到后端服务器端口8080上,没有访问到图片,所以返回值是text/html,开发环境的话,加上/api就好了

总结
如果真的需要代理的话,还是得听官方爸爸的话,使用第三方代理吧,不然还是会出很多意想不到的问题
Vue src动态引入图片不显示问题的更多相关文章
- vue中动态引入图片为什么要是require, 你不知道的那些事
相信用过vue的小伙伴,肯定被面试官问过这样一个问题:在vue中动态的引入图片为什么要使用require 有些小伙伴,可能会轻蔑一笑:呵,就这,因为动态添加src被当做静态资源处理了,没有进行编译,所 ...
- 周记4——vue中动态添加图片无效、build上线后background-image路径问题
又是一个周五,又一周要过去了...很开心,这周遇到了vue中的一个比较常见的坑,网上随便一搜就有了很多解决方案...“幸运”的是,我选了一个带坑的方案...所以我觉得有必要记录一下这个“坑中坑”... ...
- vue.js中引入图片
vue中引入图片 前言:vue中引入图片时,会显示不出来,除非在css中引入.而在template中或者js动态引入时,会显示不出图片. 解决一 图片通过后端返回引入网络图片路径即可. <div ...
- 🍓 vue循环渲染本地图片不显示? 🍓
teamList: [{ title: '大数据拍牌', imgUrl: './img/data.jpg', introduce: '5星服务:强烈推荐', cost: '15000', bail: ...
- react引入图片不显示问题
在react 中引入图片的方式和正常不同,,很容易引入不显示 引入本地图片 1.(采用组件式引入方法) import Logo from "图片路径" <img src={L ...
- vue-cli3项目中解决动态引入图片img404的问题
博主最近手头再做一个项目,需要调用天气接口,并且还要动态显示天气相关图片icon. 本来以为没什么大问题,结果硬生生被这个动态图片路径搞得民不聊生(博主还是 too young,too simple~ ...
- vue 相对路径的图片 不显示问题
例如 data () { return { img: '../../images/jifen/index/img_list_default_pic.jpg' //路径也没问题啊,怎么不显示呢,难道他瞎 ...
- Vue.js 动态为img的src赋值
在vue中动态给src赋值绑定图片会显示不出来 动态添加src被当做静态资源处理了,没有进行编译 解决方法: 1.用网络地址 把图片放在cdn或自己的服务器上,把网络地址存在imgUrl里,然后直接& ...
- viewer与 iview Carousel(走马灯) 结合使用,图片无法显示
问题原因:iview Carousel (走马灯)在加载是如果没有图片 它没有高度.之后给src赋值,图片无法显示,拖动一下浏览器宽或搞它就会显示. 走马灯解决这个问题方法:1在Carousel或其父 ...
随机推荐
- laravel报错 : No application encryption key has been specified.
创建了新的laravel项目后, 运行提示:No application encryption key has been specified 解决方法: 这个是由于没有配置好 APP_KEY 在终端上 ...
- LGP7704题解
来一个特别暴力的做法. 首先,如果删掉 \(x\) 和 \(y\) 的效果一定和删掉 \(xy\) 的效果相同,且代价一定不大于后者. 于是我们只删除质数,题目就变成了寻找 \(i!(1 \leq i ...
- 线性表是否为空,定位元素下标(基于c语言)
/*前面已经说过结构体中的n是代表已经放入线性表中元素的个数,所以判断线性表是否为空就是判断n的值是否为空*/ //书中代码如下 int isNullList_seq(PSeqList palist) ...
- ORM,Django对数据库的连接和使用
ORM,Django对数据库连接和使用数据 ORM(对象关系映射) 很多语言中的web框架都有这个概念 为什么要有ORM? 写程序离不开数据 新的语法,不需要我们自己写SQL语句 我们按照新的语法写代 ...
- knife4j只用此插件的最简洁开发方式
一.POM添加 在pom文件里添加包 1 <!--引入knife4j以来--> 2 <dependency> 3 <groupId>com.github.xiaoy ...
- redis事务及相关命令介绍
redis事务及相关命令介绍 一.概述:和众多其它数据库一样,Redis作为NoSQL数据库也同样提供了事务机制.在Redis中,MULTI/EXEC/DISCARD/WATCH这四个命令是我们实现事 ...
- linux管理用户(组)与相关问题处理
相关联文件如下: /etc/passwd/etc/shadow/etc/group ================================= [切换当前用户为root]sudo -i [创建 ...
- 用 wait-notify 写一段代码来解决生产者-消费者问题?(答案)
请参考答案中的示例代码.只要记住在同步块中调用 wait() 和 notify()方法,如果阻塞,通过循环来测试等待条件.
- jmeter的安装使用
以前没自己做过压力测试,一直都是测试在做.现在需要自己做压力测试了,特别学习下jmeter的使用方法.现在做下记录: 1.下载jmeter,这个忽略,百度到处都是 2.打开jmeter,jmeter的 ...
- http和https到底区别在哪
一.Http和Https的基本概念 Http:超文本传输协议(Http,HyperText Transfer Protocol)是互联网上应用最为广泛的一种网络协议.设计Http最初的目的是为了提供一 ...