vue2打包后图片资源无法加载的问题处理

最新推荐文章于 2025-04-23 13:41:12 发布
最新推荐文章于 2025-04-23 13:41:12 发布
阅读量1.7k 收藏 1
点赞数
CC 4.0 BY-SA版权
分类专栏： vue vue打包 文章标签： vue.js 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/zxczero/article/details/126761583
在前端开发中，遇到img标签的src和css背景图片打包上线后无法加载的问题。解决方案包括修改config/index.js的assetsPublicPath为'./'，以及在build/utils.js中为fallback添加'../../'作为publicPath。这些调整能确保图片路径正确，避免资源加载失败。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

常见问题，给自己做下记录

问题1：img标签src引用的图片打包上线后无法加载

解决方案：config/index.js 中的 assetsPublicPath值改成 ./ （比默认多一个.）

 

问题2：css中的背景图片打包上线后无法加载

解决方案：build/utils.js 中的 fallback: 'vue-style-loader' 下一行加上 publicPath: '../../'（fallback那行检查末尾有没有英文逗号，没有加上）

 

解决vue3项目打包后部署后某些静态资源图片不加载问题
蒾酒的博客
05-12 2258
可能是因为在部署后的服务器环境中对中文文件名的支持不完善。服务器在解析 URL 时可能无法正确识别或编码中文字符，导致无法正确找到文件路径。因此，改用英文文件名后，服务器能够正确解析和访问到文件，所以图片显示正常。打开浏览器控制台发现这张图片报错404。然后访问时发现导航栏背景图片没加载。将背景图片名称修改成英文。开发完项目打包并部署。
vue2/3解决项目打包后本地图片等资源找不到的问题
weixin_68658847的博客
05-23 5342
vue2/3解决项目打包后本地图片等资源找不到的问题
vue项目打包后部分背景图片加载失败
weixin_43991262的博客
10-31 1922
1、项目打包以后静态文件资源访问不到，路径错误 打开config文件夹下面的index.js文件，找到以下位置： 原文件中红框标出的位置是 assetsPublicPath: '/', 修改为 assetsPublicPath: './', 保存。 要注意的一点是修改index.js中 build对应的该属性，不要修改错了。 2、打包后部分背景图片加载失败 原因：为了节省资源请求次数，vue...
vue项目打包后点击dist下面index.html(无法访问您的文件该文件可能已被移至别处、修改或删除。ERR_FILE_NOT_FOUND)比如若依
最新发布
不要和代码过不去
04-23 342
我估计你的edge是老版的ie内核，如果是新版edge也打不开。powershell进入dist目录运行下面的指令。谷歌内核因为同源策略不允许加载本地 js。打开 控制台打印 中的任意一个url地址。
vue项目webpack打包后图片不展示问题
吴佳强的博客
01-10 1115
vue项目webpack打包后图片不展示问题
vue开发之图片加载不出来问题解决
热门推荐
lihuanan123的博客
12-15 1万+
在使用vue开发项目的时候，经常会遇到的一个问题就是：图片加载不出来。下面是我总结的几种图片加载不出来的情况及解决办法。 一、项目打包完成后，打开整体空白 1、路径问题 原因 在vue+webpack的项目中，项目打包之后的css和js的引用路径是绝对路径，项目部署之后会将静态当成根目录，就造成了文件引用路径的错误。 解决办法 通过修改配置文件，将绝对路径改为相对路径。 ...
vue2.+模板项目背景图片打包之后不显示，vue2.+模板背景图片相对路径打包图片也不显示，也不管用解决办法
04-29 464
先看描述： 打包之后运行的地址不是服务器根目录，而是根目录下方的另外一个目录，这时候使用绝对路径是不行的，举个栗子： 本来访问你的网站是酱紫：http://www.aaa.com 现在服务端告诉你，项目放在了服务器根目录下边的 bbb 文件夹，打包之后存放的地址就是 bbb 这时候访问地址就变成了：http://www.aaa.com/bbb 或者 http://www.aaa.com/bbb/i...
解决vue打包之后静态资源图片失效的问题
08-28
解决 Vue 打包之后静态资源图片失效的问题 在 Vue 项目中， 经常会遇到一个问题，即在打包之后静态资源图片失效的问题。这种问题可能会导致图片无法显示，控制台中提示某个图片没有找到（404 错误）。这种问题的...
基于vue打包后字体和图片资源失效问题的解决方法
08-27
综上所述，解决Vue打包后字体和图片资源失效的问题主要涉及到Webpack的配置调整，包括正确处理字体和图片文件，以及设置合理的公共路径和输出路径。通过以上方法，你可以确保在生产环境下，这些静态资源能被正确地...
Vue动态加载图片在跨域时无法显示的问题及解决方法
10-15
本文主要探讨了在Vue项目开发中遇到的一个常见问题——动态加载的图片在跨域环境下无法正常显示的问题。这个问题的根源在于浏览器安全策略限制，导致前端应用无法直接从不同源（域名、协议或端口）的服务器上加载...
解决Vue打包后访问图片/图标不显示的问题
10-16
总结一下，解决Vue打包后图片和图标不显示的问题主要涉及两个步骤：一是检查并修正CSS中引用资源的路径，二是通过配置`publicPath`让Vue CLI在打包时自动处理资源路径。完成这两个步骤后，你应该能够成功地在生产...
Vue - vue+webpack创建的项目打包发布至服务器，页面空白及背景图片不显示问题解决
技术共享，共同进步！
04-11 2442
Vue - vue+webpack创建的项目打包发布至服务器，页面空白及背景图片不显示问题解决
vue+webpack项目打包后背景图片加载不出来问题解决
weixin_42966151的博客
01-27 3224
vue+webpack项目打包后背景图片加载不出来问题解决
vue项目中打包后的地址加载不出图片【五种解决方案】
m0_60676278的博客
01-23 962
在 Vue 项目中打包后，加载图片路径可能会出现问题，主要是因为打包后的路径与开发时的路径不同。
vue打包项目以后白屏和图片加载不出来问题解决方法
unhejing的博客
03-06 1523
vue打包项目以后部署访问白屏。查看控制台是404.这是由于打包的时候没有设置对静态资源路径。原文件是绝对路径，需要改成相对路径。 1.白屏修改config/index.js 2.图片加载不出来，修改build/utils.js ...
vue run build之后图片无法加载
guitarist0505的博客
10-08 1900
原创 VUE项目打包（解决背景图片不显示问题） ...
vue项目使用webpack打包后,图片不显示
weixin_45032622的博客
11-01 6096
vue项目打包后放到服务器上,配置好后,发现页面可以正常访问,访问后端接口也没有问题,但是网页登录界面的背景图片显示不出来.查看控制台也没有报错。错误原因是Webpack打包之后，在webpack.base.conf.js中会有图片大小限制配置{.*)?$/,}我们这里将limit注掉之后，重新打包，图片便可以显示。
Electron-builder打包vue项目后,背景图片不加载的问题
m0_63548381的博客
04-09 3490
打包后的项目启动之后，背景图片没有成功加载，只有一片空白。此时打开调试工具可以看到,electron自动把图片路径加上了/img/我们这时打开打包后的dist_electron文件夹，打开bundled\img目录,这就是上面报错的路径。
VUE3+TS 打包后图片不显示
lovewangyihui的博客
05-21 516
问题：开发环境图片显示，打包后图片不显示，注意是图片路径引用错误；
vue2打包压缩图片
02-21
### Vue2 项目构建过程中压缩图片 在 Vue2 项目中实现打包时自动压缩图片，主要依靠 Webpack 的加载器 `url-loader` 和 `file-loader` 来处理静态资源。为了确保图片能够被有效压缩并优化网页性能，在配置文件中合理设置这两个加载器至关重要。 对于较小尺寸的图像，可以利用 `url-loader` 将其转换为 Base64 编码字符串内联到 CSS 或 JavaScript 文件中，从而减少 HTTP 请求次数；而对于较大尺寸的图像，则交由 `file-loader` 进行常规复制操作，并应用指定的压缩工具来减小体积[^3]。 具体来说，在 `build/webpack.base.conf.js` 中定义规则： ```javascript module.exports = { module: { rules: [ { test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, loader: 'url-loader', options: { limit: 8192, name: 'img/[name].[hash:7].[ext]' } }, // ...其他规则... ] } } ``` 上述代码片段展示了如何配置 URL 加载器以支持多种格式的图片文件。其中 `limit` 参数决定了当文件大小不超过该阈值（单位为字节）时将其转化为 Data URI 方式嵌入；超过则交给 File Loader 处理。 如果希望进一步提升图片质量的同时保持较低的数据量，还可以集成专门用于图像优化的任务库，例如 `imagemin-webpack-plugin` 插件。安装完成后只需简单调整 Webpack 配置即可启用此功能： ```bash npm install imagemin-webpack-plugin --save-dev ``` 接着更新 `build/build.js` 文件加入插件实例化语句： ```javascript const ImageminPlugin = require('imagemin-webpack-plugin').default; // ... new ImageminPlugin({ disable: process.env.NODE_ENV !== 'production', // 只有生产模式下才开启 pngquant: { quality: '90-100' }, // PNG 图片无损压缩选项 }), ``` 这样就可以确保每次执行 `npm run build` 构建命令时都会对符合条件的图片实施高效的压缩流程[^2]。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值