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 ...
随机推荐
- 修改hostname
修改hostname步骤 1. 修改/etc/sysconfig/network中的hostname选项 2. 在/etc/hosts中添加hostname对应的ip地址 3.执行命令:hostnam ...
- windows之电脑开机出现 this product is covered by one or more of the following prtents
电脑开机出现 this product is covered by one or more of the following prtents 有次意外断电后就每次都出现这个提示,然后要等检查完才能进入 ...
- Django框架详细介绍---cookie、session、自定义分页
1.cookie 在HTTP协议介绍中提到,该协议是无状态的,也就是每次请求都是独立的,它的执行情况和结果与前面的请求和之后的请求都无直接关系,它不会受前面的请求响应情况直接影响,也不会直接影响后面的 ...
- Docker镜像配置redis集群
redis版本:3.2.3 架构: 3节点redis集群,并为每个节点设置一个备用节点,共6个节点 1.安装redis镜像 docker load < docker.redis.tar.gz 2 ...
- 阿里云 SSL 证书 总结
历时2天左右的证书上传部署,终于结束了! 因为公司要开发小程序,小程序部署到开发环境必须支持https证书行. 阿里云目前的证书还是比较多的额,大致分为2类,一类是支持单域名,一类是支持泛域名. 自己 ...
- mysql_study_1
创建数据库 创建表 数据类型 插入数据的几种方法 约束 代码 CREATE DATABASE mysql_shiyan; use mysql_shiyan; CREATE TABLE departme ...
- RESTClient 使用
Wisdom RESTClient 一款自动化测试REST API的工具,它可以自动化测试RESTful API并生成精美的测试报告,同时基于测试过的历史API,可以生成精美的RESTful API文 ...
- 安卓GreenDao(基础)
GreenDao的基础使用很简单,网上一大筐,推荐在简书里面搜索,那么我这里要说些什么呢,试想,这些简单的Demo可以带你了解GreenDao,但你能用这些代码做公司的项目么,肯定不行,所以我结合自身 ...
- Emote木马分析
前言:网上找的样本是EXE的,没有邮件样本,所以只做了exe分析. 一.Emote木马相关信息 文件: C:\Users\Desktop\Samp.exe 大小: 249856 bytes 文件版本: ...
- 关于IIS的4月26日笔记
常用命令: 31. regedit.exe----注册表 48. msconfig.exe---系统配置实用程序 80. services.msc---本地服务设置 93. regedit.exe- ...