Vue打包时图片资源放置在src同级static文件下出现图片访问失败的问题

最新推荐文章于 2025-03-15 00:00:00 发布
原创 最新推荐文章于 2025-03-15 00:00:00 发布 · 5.6k 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#Vue #打包图片 #路径错误

本文介绍了一个常见问题：在开发环境中图片显示正常，但打包后图片无法访问的情况。通过分析发现这是由于路径变更导致的问题，并提供了使用绝对路径作为解决方案。

1.问题：图片放在src同级目录下static目录下，开发环境使用相对路径，运行正常，打包后图片访问失败

2.原因：参考文档（https://www.jianshu.com/p/563e417e2d1f）,路径变更了

3.解决方式：使用绝对路径，static/xx.png

Vue项目+ 打包解决静态资源无法加载和路由加载无效(404)问题
蓝胖子的博客
04-03 2597
Vue项目+ 打包解决静态资源无法加载和路由加载无效(404)问题
vue项目文件介绍
xm1037782843的博客
11-05 5509
vue项目各个文件配置说明
Vue打包后访问静态资源路径问题
12-13
Vue介绍中static文件夹里放的是静态资源目录，如图片、字体等。 我们发现运行npm run start后本地图片路径是没问题的，但是打包上传后会怎么样呢？ 我们知道，执行npm run build 后会生成dist文件夹，把里面的index.html在浏览器运行会发现 图片路径出错啦！！！ 解决方法： 1.先找到config下的index.js文件 把最后的’/’ 改为 ‘./’ 2.接着把图片地址改为 以上就是Vue打包后访问静态资源路径问题的相关知识点，感谢大家的阅读和对软件开发网的支持。
vue项目打包后部分背景图片加载失败
weixin_43991262的博客
10-31 1985
1、项目打包以后静态文件资源访问不到，路径错误 打开config文件夹下面的index.js文件，找到以下位置： 原文件中红框标出的位置是 assetsPublicPath: '/', 修改为 assetsPublicPath: './', 保存。 要注意的一点是修改index.js中 build对应的该属性，不要修改错了。 2、打包后部分背景图片加载失败 原因：为了节省资源请求次数，vue...
vue部署项目之后，无法访问到静态资源（图片）
简的博客
06-29 1万+
首先参见如下帖子：https://blog.youkuaiyun.com/qq_39480597/article/details/79568173， 这个算是系统的管理了静态资源资源问题，适合大部分静态资源访问不到的情况，但是觉得很繁琐，我这边没有用，我下面列出一种，只有一两张图片访问不到的情况 我这边是访问图片出现了问题，而且只有一张，是通过new 出来的image对象，原始代码如下 // js操作dom，...
vue打包后静态资源或图片无法访问,vue打包后html一片空白
khbilhjknkjb的博客
09-15 1934
@[TOC](vue打包后静态资源或图片无法访问,vue打包后html一片空白 1.更改配置文件资源路径 2.将所有的.jpeg类型的图片改成png或者jpg 希望对你有所帮助
解决vue打包之后静态资源图片失效的问题
11-27
如果将`static`放在`src`同级目录，可能导致CSS文件引用背景图片时出现问题，例如，你可能会这样尝试引入： ```css background-image: url(../static/images/user.png); ``` 然而，这种写法在打包时可能会引发错误...
详解vue-cil和webpack中本地静态图片的路径问题解决方案
08-29
2. 将所有的静态图片资源放在和 `src` 同级目录下的 `static` 文件夹下。 3. 在组件文件中，使用 `../../static/img/xxx.png` 的方式来指定图片的路径。 这样，在开发模式下和生产模式下的图片资源路径都不会出问题...
Vue CLI与Webpack中本地静态图片路径问题解决方案
为此，推荐采用“静态资源分离”策略：将所有不需要经过 Webpack 编译处理的纯静态资源（如图片、字体、PDF 文件等）统一放置于与 src 同级的 static 目录下（注意不是 src/assets）。该目录下的资源在构建过程中...
vue+express+mongodb项目打包部署在云服务器上
天极小强的博客
08-08 557
Vue+express+mongodb项目打包部署在云服务器上 笔者所处前提：一台安装了node+mongodb+pm2的云主机。相关安装教程大家可自行网上搜索。 由于笔者买的是腾讯云的学生服务器（centos7），这里就以它为例子。 第一：配置安全组。 在安全组中新建规则，选择开放端口。 在新规则右侧的管理实例中添加你的云主机。然后修改规则，添加可能用到的端口。 第二：进入你的云主机，检查...
关于vue打包后图片路径找不到的问题
weixin_30479905的博客
08-07 5055
//asserts引入的静态资源是相对路径 //而static引入静态资源时必须是绝对路径 slides: [ { //当asserts引入动态绑定的静态资源时，需要以模块的方式导入资源， //将图片作为模块加载进去 src: require(‘../../../asserts/img/pic1.jpg’), ...
vue 打包后 static 中图片路径不对的问题
热门推荐
热爱思考、活力满满、开朗爱笑的年轻人
12-10 2万+
vue 打包后 static 中图片路径不对的问题 在做这个 vue-cms 项目时，npm build 打包部署后，然后访问的时候，发现：图片不能正常的显示（包括背景图，logo 之类的），请求的路径都 404 了，明显不对。 ...
vue 打包之后拿不到 原先 static 文件里的 图片
dongcehao的博客
03-30 1万+
vue 打包之后拿不到 原先 static 文件里的 图片关于vue 打包是一个 困扰了很多初学者的问题，当然包括我。不过vue-cli 已经优化的很好关于路径问题，百度上有很多，就是在修改：这个文件下的  build: {    // Template for index.html    index: path.resolve(__dirname, '../dist/index.html'), ...
关于vue打包后，访问不到页面和访问不到图片。
weixin_30509393的博客
08-09 1089
vue项目完成打包上线的时候很多人都会碰到静态资源找不到，常见的有两个第一种：js，css路径不对解决办法：打开config/index.js，将其中的assetsPublicPath值改为’./’ 第二种：css中引用的图片资源找不到我的项目文件中有一段css，其中引用了一个背景图片“src/assets/”文件夹下有这张图片，打包后路径发生变化这个图片就找不到了，解决办法：打开...
Vue工程打包部署到服务器后，静态文件（图片）不显示
sinat_39648402的博客
09-16 9076
问题描述：在自己工程里打开Powershell窗口，运行npm run dev在本地浏览器打开http://localhost:8080/index.html------工程运行良好！但是npm run build时获取打包文件dist并部署到服务器上后发现打开http://10.0.0.19/dist/index.html后某些静态图片显示不出来… 也可以想象出，此类问题肯定是打包文件获取问题------针对于如此，可做以下处理： 1.在config（文件夹）—>index.js中，添加（如图的红色
Ant Design Pro of Vue打包有前缀静态资源访问不到
agdmwtgaga的博客
01-30 1016
Ant Design Pro of Vue打包有前缀静态资源访问不到
彻底解决 Vue 打包后静态资源图片失效的终极指南
最新发布
嗨，欢迎来到我的 优快云 博客小天地！一名深耕多年的技术发烧友。在这里，我将把日常工作中积累的宝贵经验，从复杂架构设计的精妙之处，到代码优化的实战技巧，毫无保留地分享给大家。
03-15 2881
彻底解决 Vue 打包后静态资源图片失效的终极指南
[vue] 怎么解决vue打包后静态资源图片失效的问题？
歌谣的博客
01-14 2434
[vue] 怎么解决vue打包后静态资源图片失效的问题？ 上面蛮多回答感觉像开玩笑似的，静态资源图片失效分几种情况。 1、确定线上环境是否在根路径上，配置资源根目录，vue-cli2 和 vue-cli3 字段不一致（assetsPublicPath 和 publicPath ），如果项目是根路径上，用'/'，'./'都行，如果是在'/hc'这个路径上，用'./' 相对路径（需history模式），也可以用'/hc/'。 在'/hc'路径上，如果需要本地和线上保持一致，可以用环境做判断设置不同的public
Web前端最全vue 打包后 static 中图片路径不对的问题，前端view绘制流程面试
2401_84616533的博客
05-08 872
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】与此同时呢，由于我们在 css 中使用了相对路径来引入图片。那么，打包后，我们的 css 会抽离出来为一个单独的 css 文件，这个时候， css 和 图片 之间的一个相对路径关系就改变了。为了解决这个问题，我们需要在中，增加一个pablicPath的配置，示例代码如下：publicPath: ‘…/…/’ // 作用是设置打包过程中提取css的方法})} else {这个时候，就解决了打包后图片路径404的问题了。
Vue下图片上传的三种策略：云存储实践
本文主要介绍了在Vue项目中实现图片上传的三种常见方法，以满足后台系统添加商品时上传商品轮播图的需求。首先，我们将通过模拟一个实际的业务场景来阐述问题，即在后台管理系统中，用户需要填写商品信息并上传多张...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值