Vue -- Vue打包后背景图片路径错误

最新推荐文章于 2024-07-17 20:15:29 发布
最新推荐文章于 2024-07-17 20:15:29 发布
阅读量861 收藏
点赞数
分类专栏： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/bobobocai/article/details/80815922
版权
本文详细介绍了在Vue项目中如何处理背景图片路径，包括将图片资源置于assets和static文件夹下，并通过img标签及css引用。同时，讨论了在Vue项目打包前，对build/utils.js和config/index.js的配置调整，如设置publicPath为'../../'和修改assetsPublicPath为'./'，以解决打包后图片路径错误的问题。
摘要由CSDN通过智能技术生成

Vue项目中使用图片的方法有如下几种：

1、图片资源放在 assets -> imgs文件夹下面
①img标签引入图片

<img src="../assets/imgs/bg.png" class="loginImg" />

②css使用图片
background: url('../assets/imgs/loginback.png') no-repeat top left ;
2、图片资源放在static->imgs文件夹下面
①img标签引入图片
<img src="../../static/imgs/bg.png" class="loginImg" />
②css使用图片
最低0.47元/天 解锁文章
bobobocai
关注
专栏目录
Vue打包后图片路径问题
xingYev的博客
08-23 1212
1.vue 在背景图片引发的问题 在使用vue_cli时背景图片出现路径问题 需要在build文件夹的utils.js里添加 publicPath:’../../’就可以了 修改前 修改后 其中如果在行内样式中写了背景图片，这种方法是不可行的。 2.vue 在data里面引入图片引发的问题 在data中正常引入图片是这样的： export default { da...
Vue打包后图片路径错误
pobu168的博客
01-25 504
传送门
vue3 快速入门 (三) : vue中的图片路径
最新发布
朱豪凯的博客
07-17 1857
介绍在Vue3中，引用图片路径的3种方式
齐枭飞 Vue系列--vue的图片路径，和背景图片路径打包后错误解决
一个来自外太空的游客
09-19 437
老实的按照官网提供的，搭建的了 webpack+vue+vuex+vue-router，，因为是自己搭建的，所以踩了不少坑，一般问题百度都有，这个背景图片的问题，查了很久才解决。 1、找到 config-&gt;index.js里面，如下修改 2、找到 build-&gt;utils.js,在里面加入一句publicPath:’…/…/’, [图片上传中…(image-7129b4-152301...
vue背景图片路径问题
坚持原创
02-24 1万+
共三种情况： <div class="about" :style="{backgroundImage:'url('+pic+')'}"> pic:require('@/assets/bg.jpg') <div class="about" :style="{backgroundImage:'url('+require('@/assets/bg.jpg')+')'}"> &...
Vue打包后背景图片路径错误问题，背景图片不显示问题。
码小哥的专栏
10-10 465
npm run dev : 提供一个开发的环境，自动热更新，资源使用绝对路径，所以可以正常看到背景图片。 npm run build : 打包项目，资源使用相对路径，所以会出现路径错误问题。 打开build/utils.js，在图中相应位置加入红框内容，其中值可能会有不同，若不同，自己配置成相应的即可。 需要在config/index.js中设置 ...
解决vue项目打包后提示图片文件路径错误的问题
08-27
主要介绍了解决vue项目打包后提示图片文件路径错误的问题,本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
vue-cli中打包图片路径错误的解决方法
08-29
vue-cli中打包图片路径错误的解决方法 Vue-cli是一个流行的前端开发工具，它提供了一种快速构建和部署Web应用程序的方式。但是，在使用vue-cli打包图片时，可能会出现图片路径错误的問題，这篇文章将为大家介绍如何...
关于Vue背景图打包之后访问路径错误问题的解决
08-28
当图片小于 10KB 时，url-loader 会将其转换为 base64 格式，但是在 CSS 中访问图片路径时，会出现路径错误的问题。 解决这个问题有四种方法： 1. 使用小图片作为背景图片（建议）： 将小于 10KB 的图片作为背景...
解决vue-cli项目webpack打包后iconfont文件路径的问题
10-18
然而，当使用`webpack`进行打包时，由于文件路径的处理方式，可能会导致打包后的CSS文件引用的字体文件路径错误，从而在生产环境中无法正常显示图标。 在描述的问题中，我们看到打包后的字体文件位于`static/fonts`...
解决vue打包css文件中背景图片的路径问题
10-18
今天小编就为大家分享一篇解决vue打包css文件中背景图片的路径问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
解决在vue项目中,发版之后,背景图片报错,路径不对的问题
08-27
下面小编就为大家分享一篇解决在vue项目中,发版之后,背景图片报错,路径不对的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
解决Vue打包之后文件路径出错的问题
weixin_34348111的博客
08-21 914
废话少说，项目开发中遇到使用vue-cli打包后，路径出错的问题，在网上找了一些方法，发现下面这种方法是有效的： 1，静态文件路径错误找到config文件夹下的index.js文件修改一下位置 看清楚是 build（上边还有个dev 是开发环境下的配置，不需要改动）下的 assetsPublicPath ：将‘/'改为‘./' 2，背景图...
解决vue打包后静态资源路径错误的问题
2401_84435555的博客
04-27 1697
页面中引入资源的方式往往有如下几种* HTML标签中直接引入图片， 如* JS代码中定义资源路径属性，如* CSS代码中定义资源为背景图片，如上述三种资源加载方式还是有所区别的。前两种无论图片大小，都会使用url-loader加载器将其转化为base64编码的静态资源，而第三种方式则会根据webpack中配置的limit参数，动态选择符合大小要求的图片进行转码，此时则会导致不符合大小选择的图片加载失败，同时报出如下错误。
vue踩坑系列——backgroundImage路径问题
热门推荐
有问题可关注公众号：前端研究院 后台输入问题回复
08-08 4万+
项目中图片都放在src/img文件夹，img和background-image引用都用相对路径，即../../这种形式 在打包build的设置路径assetsPublicPath: ‘./‘，然后那些没有转成base64的背景图都失效了，，路径。 处理方法： 使用require引入图片 img标签 &amp;lt;img :src=&quot;require('assets/img/header/sea...
vue踩坑--background-image路径问题
weixin_59907064的博客
09-20 1万+
项目中图片都放在src/img文件夹，img和background-image引用都用相对路径，即../../../这种形式。在项目打包build设置路径assetsPublicPath:'./'，然后哪些没有转成base64的背景图都失效了
解决vue中img或元素背景图片无法显示或路径错误问题
WanweI897的博客
08-01 4911
解决vue中img或元素背景图片无法显示或路径错误问题。
解决Vue打包后背景图片路径错误问题
weixin_43294092的博客
06-27 1593
解决Vue打包后背景图片路径错误问题 1.原因解析 当用vue-cli自动构建项目后，有两种运行方法，分别是： npm run dev : 提供一个开发的环境，自动热更新，资源使用绝对路径，所以可以正常看到背景图片。 npm run build : 打包项目，资源使用相对路径，所以会出现路径错误问题。 注: 绝对路径：从盘符开始的路径，如：C:\windows[system32](https://www.baidu.com/s?wd=system32&tn=44039180_cpr&fenl
Vue-cliWebpack项目搭建与打包路径问题解决方案
"vue-cli webpack模板项目搭建及打包时路径问题的解决方法" 本文将详细介绍如何使用vue-cli构建基于webpack的项目模板，以及如何解决在打包过程中遇到的路径问题。对于初学者，建议先掌握Vue.js的基本API，再使用...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值