vue打包后图片路径错误

2019独角兽企业重金招聘Python工程师标准>>>

错误原因

vue-cli中将图片资源路径放到了src的assets中，引入图片路径写的相对路径，打包发生错误
首先，出错点在url-loader上面。

// url-loader配置 // build/webpck.base.conf.js { test: /.(png|jpe?g|gif|svg)(?.*)?$/, loader: 'url-loader', query: { limit: 10000, name: utils.assetsPath('img/[name].[hash:7].[ext]') }

这里解释一下上面这段url-loader配置，test是正则匹配规则，匹配项目中所有的以正则规则结尾的格式的文件，直白点就是所以的图片（png，jpg，jpeg，gif，svg）。然后用url-loader进行处理。处理也有个规则如下，当不大于10000B的文件进行base64转码，就是将图片转为base64的格式。如果超过10KB的图片就单独打包到utils.assetsPath(‘img/[name].[hash:7].[ext]’) 这个目录下（从build/utils.js和config/index.js可以知道这个路径就是static/img目录，并且图片名是进行hash之后的值，根目录下面没有static目录，所以会创建一个static目录，至于为什么最后没有看见这个目录后续再说）,当我们创建了一个这样的目录之后，所有的图片访问路径就成了对应的static/img/'图片名'。到这里就可以确定，如果小于10KB的图片转为base64，大于10KB的图片已经将图片路径改为了static/img/'图片名'，然后我们继续来理清访问路径的事情。

// 目前我们的目录结构

index.html
static
- img------'picname'
- css------app.css
- js---------app.js
我们知道img为html标签，他的路径是由index.html开始访问的，他走static/img/'图片名'是能正确访问到图片的，所以img的路径没问题，然后app.css访问static/img/'图片名'是访问错误的，因为在css目录下并没有static目录。这样就造成了路径访问失败的问题。
声明：引用自vue打包路径错误

解决

第一种
- 将图片资源放到根目录文件夹下的static文件夹中，项目名--static--img下即可
- 引入图片：<img src = '/static/img/1.png />
- 引入背景图片：backgroun-img:url('/static/img/1.png')
第二种（建议）
- 不修改图片位置，仍在src/assets/img文件夹下
- 使用相对路径

转载于:https://my.oschina.net/yxmBetter/blog/1539721

vue打包后图片路径错误相关推荐

vue3+vite assets动态引入图片的几种方式，解决打包后图片路径错误不显示的问题
vite 官方默认的配置,如果资源文件在assets文件夹打包后会把图片名加上 hash值,但是直接通过 :src="imgSrc"方式引入并不会在打包的时候解析,导致开发环境可以 ...
Vue打包后图片路径问题
1.vue 背景图片引发的问题在使用vue_cli时背景图片出现路径问题需要在build文件夹的utils.js里添加 publicPath:'../../'就可以了修改前修改后其中如果在行 ...
vue打包后css路径_Vue打包后访问静态资源路径问题
Vue打包后访问静态资源路径问题 Vue介绍中static文件夹里放的是静态资源目录,如图片.字体等. 我们发现运行npm run start后本地图片路径是没问题的,但是打包上传后会怎么样呢? 我们 ...
vue打包后图片找不到情况
打包之前需要修改如下配置文件: 配置文件一:build>>>utils.js (修改publicPath:"../../" , 这样写是处理打包后找不到静态文件( ...
vue打包后图片未显示问题
开始的时候以为是图片路径方面的问题,照着网上的教程弄了半天没有解决.后来发现是自己给图片设置的透明度导致的. 即img的opacity设置为百分数的话打包后会默认变成1% 只要把里面的百分数换成小数就 ...
vue-cli脚手架npm run build打包后图片路径问题 2018.11.21
2018/11/21 最近在自己尝试做一个vue的项目,发现了一个打包以后出现的路径问题使用npm run dev 可以正常打开项目,图片路径不会出错,使用脚手架npm run build 打包以后 ...
打包后index.html路径错误,解决Vue项目打包后打开index.html页面显示空白以及图片路径错误的问题...
解决Vue项目打包后打开index.html页面显示空白以及图片路径错误的问题 2018年05月23日 10:05:35 for_weber 阅读数:14179 Vue项目运行npm run buil ...
解决：vue项目npm run build 打包后 :src路径里面的本地图片找不到。
问题描述及错误代码: // 本地运行.打包图片是ok的 <img src="../../static/images/orderSeeProgress0.png"> / ...
vue上线后，背景图片路径错误
build 下的utils.js中添加配置 if (options.extract) {return ExtractTextPlugin.extract({use: loaders,publicPat ...

vue打包后图片路径错误

错误原因

解决

vue打包后图片路径错误相关推荐

最新文章

热门文章