Vue <img :src=""/> 图片不显示
场景
图片路径被原样输出,无法正确加载图片;
<img :src="imgSrc"/>
原因
webpack 会将:src 动态绑定的值解析成字符串,原样输出;
解决办法
将路径使用 require('') 包裹起来;
data(){
return {
imgSrc:require('../../imgages/1.png')
}
}
Vue <img :src=""/> 图片不显示的更多相关文章
- vue页面中图片不显示解决
在做新版组态界面的时候,用vue框架实现,在配置页面图片的时候发现有一张图片明明页面输入的路径是对的可是图片就是不显示出来 现象: network页面资源也不报错,而且状态码竟然还是200,点prev ...
- vue打包后js和css、图片不显示,引用的字体找不到问题
vue打包后js和css.图片不显示,引用的字体找不到问题:图片一般都是背景图片. 一.vue打包出现js和css不显示问题: 1.不使用mode:'history' 2.使用mode:'histor ...
- Vue src动态引入图片不显示问题
使用vue动态引入图片显示失败,查看控制台,发现图片返回类型为text/html,这里我的图片是从后台服务器上获取的,如果你没有使用Vue的devServer.proxy 进行代理,可以光速移步百度 ...
- 🍓 vue循环渲染本地图片不显示? 🍓
teamList: [{ title: '大数据拍牌', imgUrl: './img/data.jpg', introduce: '5星服务:强烈推荐', cost: '15000', bail: ...
- vue打包后CSS中引用的背景图片不显示问题
vue项目中,在css样式中引用了一张背景图片,开发环境下是可以正常显示,build之后背景图片不显示. 解决方法: 找到build/utils.js文件 修改成为如下所示内容: 添加红框中的内容即 ...
- vue 动态拼接地址,使用本地的图片不显示
<el-col :span="4" v-for="(item, index) in listData" :key="index"> ...
- Vue动态加载图片图片不显示
图片是放在assets文件夹下的 使用require进行解决 图片不显示的原因 在webpack,将图片放在assets中,会将图片图片来当做模块来用,因为是动态加载的,所以url-loader将无法 ...
- Vue项目打包发布后CSS中的背景图片不显示
相信有很多同学在学习vue的刚开始都遇到过项目打包发布后发现CSS中的背景图片不显示,具体如何解决只需要更改bind的配置即可 修改 build/utils.js 中的 generateLoaders ...
- VUE Base64编码图片展示与转换图片
图片的 base64 编码就是可以将一副图片数据编码成一串字符串,使用该字符串代替图像地址,使用 base64 传输图片文件可以节省一个 http 请求,图片的 base64 编码可以算是前端优化的一 ...
- Vue实现一个图片懒加载插件(转载)
Vue是可以自定义指令的,最近学习过程中遇见了一个需要图片懒加载的功能,最后参考了别人的代码和思路自己重新写了一遍.以下将详细介绍如何实现自定义指令v-lazyload. 先看如何使用这个指令: &l ...
随机推荐
- 关于能否用DeepSeek做危险的事情,DeepSeek本身给出了答案
AI教父辛顿说DeepSeek允许本地部署的话可能会导致用户用DeepSeek来做一些危险的事情(https://t.cj.sina.com.cn/articles/view/7879923924/m ...
- NumPy学习12
今天学习了 22, NumPy矩阵乘法 23, NumPy IO操作 numpy_test12.py : import numpy as np ''' 22, NumPy矩阵乘法 矩阵乘法是将两个矩阵 ...
- DNS+scapy学习
DNS前置知识 大部分介绍转自这篇文章. 官方解释: DNS ( Domain Name System ,域名系统) ,因特网上作为域名和IP地址相互映射的一个分布式数据库,能够使用户更方便的访问互联 ...
- ANSYS 导出节点的位移数据
1. 数据保存 确定待提取的节点编号: 获取节点位移变量: 将节点位移变量存储到数组中,用于数据传递: ! 输出对应节点的位移到csv文件 ! 注意同时导入.db和.rst,并切换到/post26模块 ...
- Linux性能分析-平均负载
平均负载的理解 一般系统变慢时,我们会使用top或uptime命令来查看下系统的负载情况 [root@localhost shell]# uptime 13:51:08 up 5 days, 21:5 ...
- AspNetCore Json序列化设置
AspNetCore 中的Json序列化处理已经默认使用Newtonsoft.Json库了... 比如像MVC中: public I 不过使用过程中会发现一些问题,其实这算默认设置吧: Json序列化 ...
- [设计模式/Java/多线程] 设计模式之单例模式【9】
0 序 此文系对最常见的设计模式----单例模式的最全总结. 1 概述:单例模式 模式定义 单例模式: 保证1个类有且仅有1个实例,并提供1个访问它的全局访问点. 1个类有且仅有1个实例,并自行实例化 ...
- C 冒泡排序和选择排序
冒泡排序 理论概念: 从第一个数开始,将相邻的两个数比较,第一个数和第二个数比较,比如说是从小到大的排序,要是后面的数比前面的小则交换两个的位置,这样第一轮比较基数后最大的数就到了最后面,接着进行第二 ...
- mysql 的group by 满足的规则要求
GROUP BY满足的规则: 所有select 字段,除了聚合函数中的字段,都必须出现在GROUP BY 中. 例如:SELECT name,age,max(salary) FROM t_employ ...
- Robot Framework全局变量集合取值
在一次测试中,可能需要使用多个不同的会员,即需要多注册多个会员.如此配置单一参数化是无法满足对所有注册会员名的统一管理,这里引入参数变量组来实现 步骤如下: 1.脚本目录点击总目录,右键点击New R ...