vue中data中引用本地图片报错404
首先说明vue-cli中assets和static两个文件的区别
1.assets在项目编译的过程中会被webpack处理理解为模块依赖,如果执行npm run dev或npm run build命令行,assets会被编译,导致路径发生变化,所以如果写成绝对路径,会存在问题
2.static在项目编译的过程中webpack不会被解析,他相当于是存放第三方文件的地方,路径可写成绝对路径
总结:assets中的文件路径会变,static中的文件路径不变
解决办法:
1.将图片放到static文件中 例 images:[{src:”/static/1.png”},{src:”/static/2.png”}]
2.将图片作为模块加载到页面,webpack就可以将其解析(require())
在img的src中加入require
第一种用在a标签
<a :href="require('../../assets/601c5eaac1a0574a77f395aa9812d25.png')">
第一种用在img
<img :src="require('../../assets/601c5eaac1a0574a77f395aa9812d25.png')">
vue中data中引用本地图片报错404的更多相关文章
- JSP中<img>标签引用本地图片
问题描述: jsp页面中<img>标签如何读取本地文件夹中的图片. 问题起因: 由于上传图片至本地文件夹中,图片路径为: D:/upload/file/image/img.jpg 所以将这 ...
- 【maven】【IDEA】idea中使用maven编译项目,报错java: 错误: 找不到符号 【2】
=================================================================================== idea中使用maven编译项目 ...
- Markdown引用本地图片语法
Markdown引用本地图片语法 markdown引用图片标准方式如下: ![Alt text](/path/to/img.jpg) 测试markdown文本如下: # 测试相对路径图片 ![Alt ...
- IntelliJ IDEA中Mapper接口通过@Autowired注入报错的正确解决方式
转载请注明来源:四个空格 » IntelliJ IDEA中Mapper接口通过@Autowired注入报错的正确解决方式: 环境 ideaIU-2018.3.4.win: 错误提示: Could no ...
- 【转载】访问IIS中网站出现 403.14 - Forbidden报错信息
将网站发布后部署到IIS后,配置完应用程序池以及相关设置项后,在浏览器中访问设置好的网站,出现403.14 - Forbidden的错误信息,从错误信息的提示来看,应该是IIS服务器此网站目录的内容被 ...
- eclipse 中离线安装activiti插件,报错“An error occurred while collecting items to be installed session context was:(...”
eclipse 中离线安装activiti插件,报错“An error occurred while collecting items to be installed session context ...
- 关于idea中,web项目启动tomcat,访问资源报错404
背景: web项目启动tomcat,访问相应的资源,报错404,前提资源路径是没错的. 原因: 1.确定是不是web项目 不是的话: 配置web-inf的路径和webroot(web根目录)的路径 2 ...
- Linux Nginx的权限——访问本地目录报错403
在安装好FastDFS并成功上传图片文件后,根据FastDFS返回的文件地址无法通过HTTP(即浏览器)访问到,报错404或者403. 不管是Error 404还是Error 403,基本都是Ngin ...
- android studio 报错-----R全部显示红色 ---- .9图片报错
导入android项目后,R全部变红,控制台有下面的提示 意思是缺少一些资源,比如说图片之类的,然后我发现确实少了一张图片资源,导入图片资源后,依旧报错,如下 Error:Execution fai ...
随机推荐
- 基于C#实现的自动化测试框架:发布自动触发自动化回归测试
接口自动化测试用例完成以后,以前都是发布以后手动运行测试用例.虽然手动运行下脚本也就是一个F5的事情,但是离自动化测试的标准差得很远.这两天有了个大胆的想法,想要实现以下发布时直接触发自动化回归测试用 ...
- linux ip命令和ifconfig命令
From https://blog.csdn.net/freeking101/article/details/68939059
- Redis批量导入数据的方法
有时候,我们需要给redis库中插入大量的数据,如做性能测试前的准备数据.遇到这种情况时,偶尔可能也会懵逼一下,这里就给大家介绍一个批量导入数据的方法. 先准备一个redis protocol的文件( ...
- WebDriver实现网页自动化测试(以python为例说明,ruby用法类似)
什么是Webdriver? Selenium 2,又名 WebDriver,它的主要新功能是集成了 Selenium 1.0 以及 WebDriver(WebDriver 曾经是 Selenium 的 ...
- pytorch使用不完全文档
1. 利用tensorboard看loss: tensorflow和pytorch环境是好的的话,链接中的logger.py拉到自己的工程里,train.py里添加相应代码,直接能用. 关于环境,小小 ...
- HBase指定大量列集合的场景下并发拉取数据时卡住的问题排查
最近遇到一例,HBase 指定大量列集合的场景下,并发拉取数据,应用卡住不响应的情形.记录一下. 问题背景 退款导出中,为了获取商品规格编码,需要从 HBase 表 T 里拉取对应的数据. T 对商品 ...
- spring boot常见问题
1.什么是springboot 用来简化spring应用的初始搭建以及开发过程 使用特定的方式来进行配置(properties或yml文件) 创建独立的spring引用程序 main方法运行 嵌入的T ...
- vb配置下位机CAN寄存器小结
2011-12-14 18:44:32 效果图 1,完成设计(由于没有eeprom等存储设备,所以每次上电后需要通过串口配置某些寄存器).在设计中,列出技术评估难度,并进行尝试,参看<我的设计& ...
- mysql 批量导入
load data LOCAL infile 'D:/user.txt' into table userssFIELDS TERMINATED BY ',' LINES TERMINATED BY ' ...
- 安卓 ToolBar 颜色样式设置
设置Toolbar弹出菜单的字体颜色和背景颜色,包括三个点菜单颜色和返回图标的颜色. 布局文件xml <LinearLayout xmlns:android="http://schem ...