vue项目中 背景图片打包后路径问题 报404

最新推荐文章于 2023-06-19 11:50:38 发布
最新推荐文章于 2023-06-19 11:50:38 发布
阅读量983 收藏
点赞数
文章标签： vue.js webpack javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_41870520/article/details/121772091
版权
造成图片找不到的原因主要是：webpack打包以后，生成一个目录/static和一个index.html文件，会改变这几种图片引入的路径。

具体改变如下：
在页面中和js中，改变是一样的，直接将路径直接改为‘static/img/XXX.png’，所以，如果是在页面中或者js中引入的图片，正常打包后，没有问题正常显示；

直接修改build/utils添加 publicPath: '…/…/

return ExtractTextPlugin.extract({ use: loaders, fallback: 'vue-style-loader'， publicPath: '../../ })在这里插入代码片

zbgahj1120
关注
Vue打包后访问静态资源路径问题
12-13
Vue介绍中static文件夹里放的是静态资源目录，如图片、字体等。 我们发现运行npm run start后本地图片路径是没问题的，但是打包上传后会怎么样呢？ 我们知道，执行npm run build 后会生成dist文件夹，把里面的index.html在浏览器运行会发现 图片路径出错啦！！！ 解决方法： 1.先找到config下的index.js文件 把最后的’/’ 改为 ‘./’ 2.接着把图片地址改为 以上就是Vue打包后访问静态资源路径问题的相关知识点，感谢大家的阅读和对软件开发网的支持。
Vue项目打包后，背景图片不能显示，提示404解决方法
qq_32851969的博客
06-05 786
解决方法：打开项目找到图中文件，修改config下面的index.js build: { assetsPublicPath: './' } 然后再打开build/utils.js增加 找到generateLoaders方法增加 if (options.extract) { return ExtractTextPlugin.extract({ use: loaders, fallback: 'vue-style-loader',
关于Vue背景图打包之后访问路径错误问题的解决
08-28
本篇文章主要介绍了关于Vue背景图打包之后访问路径错误问题的解决，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vue项目图片加载404（not found）问题，如何解决
你好！我是派大星，一个热爱分享的个人博客作者。我的博客致力于分享关于前端开发的知识、见解和经验。通过我的文章，实用技巧和个人心得。无论是解决问题、获取新知识，还是激发创造力和热情，我的目标是为读者提供有价值的内容和启发思考的观点。
04-19 3298
vue路径报404，解决方式
解决动态引入图片打包后无法显示的问题
最新发布
qq_52222760的博客
06-19 786
图片动态绑定。开发时可以正常显示，打包后无法显示。
vue请求本地路径GET http://localhost:8080/.... 404 (Not Found)
weixin_48203270的博客
12-17 6543
vue请求本地路径GET http://localhost:8080/.... 404 (Not Found)
解决vue打包css文件中背景图片的路径问题
10-18
在Vue项目开发过程中，常常会遇到打包后css中背景图片路径出现错误，导致在生产环境中无法正确加载图片的问题。本文将详细探讨这一问题，并分享解决方案。 首先，需要明确背景图片路径错误的常见原因。在开发环境下...
vue 项目打包时样式及背景图片路径找不到的解决方式
10-16
在使用Vue进行项目开发和打包的过程中，常常会遇到样式文件和背景图片路径无法正确引用的问题。这一问题经常出现在Vue项目打包后，尽管文件可以被正确找到，但引用的资源文件，如字体和背景图片等却无法正确加载。这...
Vue项目中设置背景图片方法
08-28
这个问题的出现主要是由于路径解析的问题，当我们在样式中添加了背景图片后，编译打包后，配置到服务器上时，图片并不能够正确的显示出来。 要解决这个问题，我们可以使用 Node 中的一种比较有效的方式来解决这个...
vue 项目GET http://localhost:8080/ 404 (Not Found)
热门推荐
南北极之间
07-29 2万+
解决办法：这里只有一个斜杠。没有一点。 出错原因：我昨天打包的时候要操作这个文件。把dev里的地址也加了一个点。其实只需要在打包的地方加一个点就好了 资料： https://blog.csdn.net/xiaoxia188/article/details/83746465 ...
vue打包后路径失效、找不到、404的问题
qq_45747074的博客
07-05 4306
vue打包路径丢失的问题 在vue项目打包以后，本地打开项目会出现css、js路径404的问题，这是因为vue打包后的路径默认是根路径。 解决方法： 在vue.cofign.js文件中将 （如果没有vue.cofign.js文件，需要自行创建一个）...
解决vue页面中background背景图404问题
CC的博客
06-24 3020
在 css中写background增加背景图片，会出现404错误，在css中可以这样写避免404： background: url("~@/assets/img/main-title.png") no-repeat; background-size: 100% 100%; 解释一下，@这是webpack设置的路径别名，代表src resolve: { alias: { '@': resolve('src') } } ~符号，是stylus-lo
vue踩坑--background-image路径问题
weixin_59907064的博客
09-20 1万+
项目中图片都放在src/img文件夹，img和background-image引用都用相对路径，即../../../这种形式。在项目打包build设置路径assetsPublicPath:'./'，然后哪些没有转成base64的背景图都失效了
vue 在css 引入背景图background: url（艾特assets/img/bg.png) 报错
南极修炼千年的大冰块
11-22 1万+
vue 在css 引入背景图background: url(@assets/img/bg.png) 报错 Cannot find module ‘./@assets/img/bg.png’ 把background: url(@assets/img/bg.png) 改为background: url(~@assets/img/bg.png)
Vue项目中直接引入图片 报错（404 not found）
weixin_44588262的博客
12-02 1万+
问题：在vue 项目中，引入的图片无法在网页显示 控制台报错：图片地址 404 not found 解决方案： 把图片放在 static 文件夹，不要放在 assets 文件夹 index.html 代码： <img src="./src/assets/img/logo.png" > 解决方案： 1. 把图片放在 static 文件夹，不要放在 assets 文件夹 我在 static 新建一个img 文件夹，并把 assets 文件夹中的图片搬了过去 2. 重新填写图片路径 <i
vue 动态显示图片报错 404
liuxi_happy的博客
11-17 5153
<img :src="image"> 当我们动态加载图片的时候会出现如下图错误 1.第一种可能，是你写了相对路径引起的，你需要写绝对路径 image:'../../assets/image/top10-1.png' 你需要改成具体路径 image:'/src/assets/images/top10-1.png' 2.第二种解决方式你要使用require() <img :src="require(images)"> 3.第三种解决方式把图片放在public目录下面，但是这样虽然
vue2.0采坑 background-image 不显示
飘雪的博客
07-07 1万+
问题描述：          笔者在用vue2.0+进行开发时，遇到 &lt;div style="background-image:url('../assets/images/图片.jpg');" &gt;    图片显示 不出来 反复确认引入的背景图片路径也没错，然后图片就是显示不出来，也不知道怎么回事 后经过自己。。。。，问题得到了解决. 解决方案： 1. 在script代码块...
vue项目运行问题
weixin_52094928的博客
07-06 1081
1、引入less less-loader运行后报错： 原因：less less-loader 版本太高，与 webpack 不匹配 方法一：降低less-loader版本 npm uninstall less-loader # npm install less@3.9.0 less-loader@5.0.0 -s npm install less-loader@5.0.0 方法二：在 package.json 文件中将 less less-loader 的版本手动降低，然
vue 页面跳转404_出现404页面怎么办？应该如何处理404页面？
weixin_39628063的博客
10-22 1857
当出现404页面怎么办？应该如何处理404页面？我们都知道404页面是用户在输入错误的链接时，显示的返回页面，但是作为SEOer来说，一切与用户有关的事，我们都不能忽略， 当用户已经点击进来，难道要因为出现的404页面而失去众多用户吗？不！这不是一个优秀的SEOer该做的事，下面大吼吼来讲一下出现404页面该如何做？ 首先我们先来说一下404页面出现错误的原因：无非就是以下三种 ...
Vue-cliWebpack项目搭建与打包路径问题解决方案
本文将详细介绍如何使用vue-cli构建基于webpack的项目模板，以及如何解决在打包过程中遇到的路径问题。对于初学者，建议先掌握Vue.js的基本API，再使用vue-cli进行项目搭建，以更好地理解和学习前端开发流程。 1. *...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值