vue+webpack打包图片路径错误的问题

最新推荐文章于 2023-06-29 20:04:01 发布
最新推荐文章于 2023-06-29 20:04:01 发布
阅读量694 收藏 1
点赞数 1
分类专栏： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37334435/article/details/89379128
版权

1、js，css路径不对

解决办法：打开config/index.js，将其中的assetsPublicPath值改为’./’

2、css中引用的图片资源找不到

看下图

这是因为webpage打包的时候会把整个相对路径../../assets/img/login_bg_2.png改成static/img/login_bg_1.1b2f449.png,此时的路径还在css文件内，所以我们需要将build>utils.js修改一下

将路径返回到dist目录下，此时的打包路径就成功了

不忘初心1123
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
webpack配置打包后图片路径出错的解决
08-27
本篇文章主要介绍了webpack配置打包后图片路径出错的解决，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vue assets动态引入图片解决打包后图片路径错误不显示的问题
最新发布
yf18040578780的博客
01-03 933
vue3 assets动态引入图片解决打包后图片路径错误不显示的问题
webpack配置-打包后图片路径出错
puyahua的专栏
04-25 2654
webpack配置-打包后图片路径出错 问题 项目在开发环境下工作正常，当打包后图片不见了，检查元素后发现路径出错了。图片路径是这样：background: url(/static/img/bg_camera_tip.bd37151.png)，但该路径下文件并不存在。 打包后文件目录如下： 可以看到背景图片的路径应该是../../static而实际却是/static，找到原因后就好...
webpack 踩坑之对于打包的图片路径错误
qq_33745501的博客
05-10 4451
一、什么是webpack？    webpack是模块打包工具二、webpack安装        版本：4.6.0npm install webpack --save-dev npm install webpack-cli --save-dev三、配置文件webpack.config.jspubliPath的默认地址为当前目录。module.exports = { entry:{ ...
vue-webpack打包后图片找不到
momDIY的博客
03-22 2871
一、问题描述 项目在使用webpack打包后，很常见的一个问题就是dev环境可见的图片在打包之后找不到文件。 二、异常原因 1.图片未被打包 当使用的图片url是动态拼接的，可能会出现webpack没有检测到该图片被引用的问题，所以打包后图片因为不存在而找不到。 2.图片路径错误 当一个图片被多次引用，当使用的是动态拼接为打包前图片存放的路径会找不到图片，因为打包时会把动态生成的路径直接存下来，不...
webpack5的新特性 模块资源asset 打包图片资源的坑
听雨少年的博客
03-22 1452
webpack 在webpack5出来了资源模块以后，可以替代以前的 file-loader，url-loader，raw-loader等。 当我们在使用file-loader等处理图片等资源的时候，导入资源时：如果采用的是cmd规范，也就是require(‘资源’)的时候，发现是需要取出default属性的值，才是真正的资源内容。（es module没有这问题）。 而使用webpack5的资源模块新特性处理图片等资源的时候，如果采用cmd规范，导入的文件资源是不需要获取default的内容，直接requi
【webpack5图片的引入出现的问题和使用方法】
Min_Fox的博客
06-21 1043
1、给一个div设置背景图； 2、html的img标签设置图片； 3、动态修改img的src属性1、背景图也找不到，2、img图片找不到，3、动态修改图片img的src时找不到图片。1、图片未被打包 当使用的图片url是动态拼接的，可能会出现webpack没有检测到该图片被引用的问题，所以打包后图片因为不存在而找不到。2、图片路径错误 当一个图片被多次引用，当使用的是动态拼接为打包前图片存放的路径会找不到图片，因为打包时会把动态生成的路径直接存下来，不会将其二次转译为打包后相对路径。3、引入webpack需
解决webpack5打包CSS图片路径不正确问题
火星基地
03-25 3752
问题 最近在重构博客时，遇到了一个问题。在生产模式下，使用的MiniCssExtractPlugin.loader代替style-loader，但图片、字体等资源文件输出路径设置不正确，webpack 配置如下： module.exports = merge(common, { target: 'browserslist', mode: 'production', devtool: false, output: { path: path.resolve(ROOT_PATH, './b
vue+webpack 在引入图片以及在img引用变量名的本地图片报错
weixin_33911824的博客
10-11 2006
vue 在style:background-image中引入图片以及在img引用变量名的本地图片 因为项目用了vue-cli，直接写本地路径会有问题 <img :src="'@/assets/images/activity/double9/coupon'+item.price+'.png'"> 复制代码编译后是 <img data-v-0343f1f6="" src="@/ass...
Webpack打包后静态文件位置变了 导致到不位置
jt15881622410的博客
06-29 931
3、配置公共路径：可以在打包工具的配置文件中配置公共路径，使静态文件的引用路径正确。例如，在Webpack中可以使用publicPath配置项来指定静态文件的公共路径。1、使用相对路径：在代码中使用相对于当前文件的路径来引用静态文件。例如，如果静态文件与当前文件在同一目录下，可以使用./来引用静态文件。4、使用CDN：如果静态文件被托管在CDN上，可以使用CDN的路径来引用静态文件。2、使用绝对路径：可以使用绝对路径来引用静态文件。例如，可以使用项目的根路径作为基准，使用/开头的路径来引用静态文件。
vue webpack打包后图片路径错误的完美解决方法
10-17
主要介绍了vue webpack打包后图片路径错误的解决方法,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
webpack打包后直接访问页面图片路径错误的解决方法
08-30
主要给大家介绍了在webpack打包后直接访问页面图片路径错误的解决方法，文中介绍的非常详细，对遇到这个问题的朋友们具有一定的参考学习价值，需要的朋友们下面来一起看看吧。
详谈vue+webpack解决css引用图片打包后找不到资源文件的问题
01-19
使用vue打包，通过css引用图片资源。 .img { height: 500px; width: 100%; background: url(./assets/img/1.jpg) no-repeat; background-size: 100%; } 热更新开发环境的效果是这样 但打完包出来的页面却报...
完美解决webpack打包css背景图片路径问题
11-20
在vue组件的style标签内部有如下一段使用背景图片的css代码 background-image: url("../assets/img/icon_add.png"); 在webpack中css-loader的解析配置如下 { test: /\.(css|less)$/, exclude: path.resolve(__...
vue-cli中打包图片路径错误的解决方法
08-29
主要介绍了vue-cli中打包图片路径错误的解决方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
vue+element 在table 中使用vue-qrcode动态生成二维码
小小坚的博客
04-10 5254
安装 npm install xkeshi/vue-qrcode --save 在需要的页面中引入 import QRcode from '@xkeshi/vue-qrcode'; components: { qrcode : QRcode } 在el-table中 <el-table-column label="二维码" wi...
关于使用vue.js提交数组时出现数组下标的问题
小小坚的博客
03-28 3309
这是因为在vue.js 里面的ajax.js文件内对数据进行了深度解析了，我们只需要 let axios = Axios.create({     baseURL: 'http://127.0.0.1:8761/',     headers: {'X-Requested-With': 'XMLHttpRequest'},     transformRequest: [function (data...
springboot集成websocket+前端vue掉线重连机制
小小坚的博客
05-25 874
注入maven依赖 <!--websocket--> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-websocket</artifactId> </dependency&g...
webpack相对路径打包
09-21
webpack打包相对路径是指在项目中使用相对路径来引用资源文件（例如图片、样式表、字体等），而不是使用绝对路径。这样可以使得项目更加灵活和可移植，不依赖于具体的服务器路径。在vue-cli脚手架生成的项目中，你...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值