vue系列---项目打包找不到图片路径

在测试环节发现有图片找不到，发现是图片路径没有写对。
报错如下：

原代码：

 <img src="/src/assets/img/arrow.png" alt="" class="col-step">

这种引入图片的方式是错误的，虽然在页面展示的时候会出现，但是在打包后就会出现编译问题，src是无法编译的。

正确的引入格式：

第一种：

 <img src="../../assets/img/arrow.png" alt="">

第二种方式：


使用v-bind进行自定义指令，在data中进行图片路径的相对引入：

contractSL: require(‘../../assets/img/user/constract00.png’),
“`

这样在打包后就避免了图片途径找不到的问题。

vue系列---项目打包找不到图片路径相关推荐

vue+webpack项目打包后背景图片加载不出来问题解决
vue+webpack项目打包后背景图片加载不出来问题解决参考文章: (1)vue+webpack项目打包后背景图片加载不出来问题解决 (2)https://www.cnblogs.com/mica ...
vue.js项目打包时出错找不到main.js
vue.js项目打包时出错找不到main.js 打包时设置了开发环境和生产环境的入口文件分别是配置打包文件vue.config.js(没有的话新增) module.exports = {chainW ...
electron结合vue打包后 tray托盘图片路径
1 相信很多小伙子用vue.config.js 配合electron打包的时候托盘一直出不来而已应用直接不运行其实是打包后找不到图片路径了一下截图出来参考在这里插入图片描述区分下开发环境 ...
vue.js 项目打包APP应用包
vue.js 项目打包APP应用在hbuilderx编辑器使用的,vue.js 项目打包APP应用创建一个vue.js项目,写好移动端 vue.js 框架,APP项目完成. 1.在config配置 ...
elementui 样式渲染的慢_解决vue+elementui项目打包后样式变化问题
博主刚刚解决了index.html空白问题,刚打开项目页面又发现了样式出现了大问题,样式与开发版本有很大不同,有些样式没有生效.利用搜索引擎, 找到了问题所在以及解决办法: main.js中的引入顺序 ...
th:text为null报错_小猿圈web前端之vue-cli项目打包完成后运行文件路径报错问题
学习前端的小伙伴越来越多,问题也就越多,前面基础部分还好一些,特别是一到框架的时候,难住了一大部分人,今天小猿圈web前端讲师就为大家总结了vue-cli项目打包完成后运行文件路径报错问题,有兴趣的小 ...
VUE项目打包（解决背景图片不显示问题）
vue项目打包 vue项目打包改变路径配置配置背景图片路径在命令行中用npm run build 进行打包. 查看改变路径配置将绝对路径改为相对路径目标文件:项目目录 > confi ...
vue 打包css路径不对_vue项目打包后css背景图路径不对的问题
问题描述: 自己在自学vue做项目的过程中,遇到一个有关背景图片路径的问题,就是css代码中背景图片是根据相对路径来写的,如下图: 当使用npm run dev命令本地访问的时候,背景图片是正常显示的 ...
Vue Cli3 项目打包优化
1.项目优化实现步骤: 清除生产环境中的console.log语句生成打包报告,根据报告优化项目第三方库启用CDN 路由懒加载首页内容定制 2.执行build 2.1 清除生产环境中的cons ...

vue系列---项目打包找不到图片路径

vue系列---项目打包找不到图片路径相关推荐

最新文章

热门文章