vue3 - vite项目打包部署服务器上线后图片不显示并且路径中存在undefined字眼，本地开发环境下正常显示图像没任何问题，但build编译打包后上传到线上服务器后再打开就不显示了，路径有问题

已于 2024-09-12 16:01:17 修改
阅读量3.8k 收藏 3
点赞数 9
分类专栏： 前端组件与功能(开箱即用) 前端常见问题解决 文章标签： vue.js nuxt3.js vite 打包后图片不显示怎么解决 图像路径前undefined 本地调试开发环境没有问题正常 只要打包部署到服务器就无法加载
于 2024-08-18 16:14:02 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_50545213/article/details/141300654
版权

问题说明

在vue3+vite项目开发中，执行build打包编译放到线上服务器后图片全挂了不显示了，图片url路径错误并且还有可能自动添加一个undefined，但奇怪的是在本地开发却正常显示图像，vue3 vite项目使用本地图片，在开发环境时可以正常访问图片路径，打包部署到服务器上却显示路径undefined问题详细解决，无论是静态使用、动态渲染assets静态图片不显示、只要是部署后显示不了就能解决，提供强力解决方案保证搞定。

其他教程都无法解决，在本文你只要 “本地没问题，但部署上线图片就不显示” 便可100%完美解决。

在这里插入图片描述

解决教程

首先来分析下问题，

了解本专栏 订阅专栏 解锁全文
街尾杂货店&
关注
专栏目录
订阅专栏
Vue3 - vite 引入本地图片方法，页面引入本地静态资源图像详细教程，解决 UI 前端组件库的图片属性无法使用本地图像问题（无论是本地开发还是打包部署，本地图片的路径正常可用）
王佳斌
09-08 8771
vue3 vite引入使用本地图片，vue3 vite如何引入本地资源的图片图像，vite 怎么把本地的图片赋值给src图片标签属性，vue3 vite 使用require引入本地图像报错，vue3 vite组件库的组件怎么引入本地图片，vue3 vite 如何给组件库的图片属性链接本地资源的图像，element plus ant design vue 组件怎么使用本地资源的静态图片，vue3 vite版本 引入本地静态图片的方式，vue3 + vite引入本地图片，vue3如何加载本地图片等静态资源，引入
解决Vue打包后背景图片路径错误问题
源码好优多
03-08 1771
今天在插入背景图片过程中，遇到了路径错误的问题，通过网上查询，找到了解决的办法，但是大部分都没有讲造成这种问题的原因，故我简单地总结了一下，并加入了一些自己的理解，欢迎共同探讨~ 当用vue-cli自动构建项目后，有两种运行方法，分别是： npm run dev : 提供一个开发的环境，自动热更新，资源使用绝对路径，所以可以正常看到背景图片。 npm run buil...
vue3+vite项目使用本地图片打包后不显示
Handsome_gir的博客
01-06 2664
vue3+vite项目使用本地图片打包后不显示。
[ vue3 + vite ] 在开发环境时可以正常访问图片路径，打包部署到服务器上却显示路径undefined问题
Hiny2y2的博客
01-19 516
在开发环境时是正常的，图片可以正常显示，但是打包部署到服务器之后，图片地址就变成undefined了，几番周折，在Stack Overflow上找到了解决方法，具体的路径要改成自己的。我原本使用vite文档中给的方法引用项目文件夹中的图片，然后再打包部署到服务器上图片就正常显示了。今天遇到了这个问题，记录一下。
解决Vue打包后访问图片/图标不显示的问题
10-16
主要介绍了 解决Vue打包后访问图片/图标不显示的问题，本文给大家介绍的非常详细，具有一定的参考解决价值,需要的朋友可以参考下
解决VUE3 Vite打包后动态图片资源不显示问题
m0_56385144的博客
07-26 1172
原因：Vite打包时不会打包以模板字符串包裹的图片相对路径，所以vite不知道此处要用哪个图片。方法一 将静态资源放到pbulic文件中。方法二 通过import 逐个导入图片资源。方法三 在函数中动态导入。
vue2/3解决项目打包后本地图片等资源找不到的问题
weixin_68658847的博客
05-23 3075
vue2/3解决项目打包后本地图片等资源找不到的问题
vue3+vite项目，打包后，图片失效的问题
insist_life的博客
08-02 8197
第一次使用vue3+vite写一个项目，不太清楚这里的配置和vite构建工具的特性，所以在开发的时候，图片的路径都是用的相对路径；这样的静态路径引入，在开发和打包上测试环境都没有问题，都能正常显示！可以发现，在域名下直接接了src文件，但是这个域名下面是没有src文件夹的。所以浏览器报错了，同时页面没有图片显示，所以打包的时候，图片的路径出问题了！结尾：此文章仅为了下一次有相同的问题能够快速的解决，具体造成这种错误的原因需要去了解vite，有时间再说吧！这样的话，开发和上测试的时候，图片都能够正常显示了！
解决vue3项目打包后部署后某些静态资源图片不加载问题
蒾酒的博客
05-12 1593
可能是因为在部署后的服务器环境中对中文文件名的支持不完善。服务器在解析 URL 时可能无法正确识别或编码中文字符，导致无法正确找到文件路径。因此，改用英文文件名后，服务器能够正确解析和访问到文件，所以图片显示正常。打开浏览器控制台发现这张图片报错404。然后访问时发现导航栏背景图片没加载。将背景图片名称修改成英文。开发完项目打包并部署。
vite+vue3项目打包后图片不显示或者请求路径多了一个undefined
lotpyve的博客
01-24 3693
这里表示我们的 .env.development 文件，在打包的时候是不会被构建进去的，所以当我们打包后，.env.development 里面用到的路径就出错了。但是如果我们是把项目打包，然后在掉到 express 服务器里面去时，我们会发现，只显示了一张图片，另外一张图片的地址前面是 undefined。我们先来看一个简单的例子，我已经事先在本地构建了一个 express 服务器，端口是 3000，images 里面是有文件资源的，这是代码。
vue项目webpack打包后图片不展示问题
吴佳强的博客
01-10 946
vue项目webpack打包后图片不展示问题
vite打包文件配置到IIS出现页面、图片加载不出来的问题
最新发布
qq_31937799的博客
07-30 291
用vite+vue3开发的项目，打包后放在服务器上，然后配置了IIS，用链接访问后出现白页面。
vue cli4 阻止图片转base64
Tankic的博客
02-23 2142
文章目录介绍功能步骤在项目根目录中新建vue.config.js文件vue.config.js文件内容 介绍 在使用vue cli4的过程中，我们遇到比较小的图片被转成了base64格式的编码。但实际使用的时候不需要，因为转码后的图片不够清晰，特别是在大屏和高分辨率的显示器时尤甚。 参考文献：vue.config.js配置参考 功能 避免vue cli4图片转码 步骤 在项目根目录中新建vue.config.js文件 vue.config.js文件内容 var path = require('path
Vue - vue+webpack创建的项目打包发布至服务器，页面空白及背景图片不显示问题解决
技术共享，共同进步！
04-11 2324
Vue - vue+webpack创建的项目打包发布至服务器，页面空白及背景图片不显示问题解决
vue-cli2和3打包之后打开index.html白屏以及图片不显示问题
l17862868372的博客
08-28 986
vue-cli2 打包白屏问题以及图片不显示问题 下边有3得配置 1.配置config文件夹下的index.js 配置如下： //找到buind:{}里边得assetsPublicPath，改成相对路径 assetsPublicPath: '/', 2.如果你的路由模式是history模式需要后端做如下配置： Apache <IfModule mod_rewrite.c> RewriteEngine On RewriteBase / RewriteRule ^index\.html
vite打包部分页面不显示问题+图片不显示问题
wangweiruning的博客
08-23 6110
vite打包部分页面不显示问题+图片不显示问题
vue+webpack项目打包后背景图片加载不出来问题解决
weixin_42966151的博客
01-27 3144
vue+webpack项目打包后背景图片加载不出来问题解决
vue3 + vite动态引入图片以及本地正常展示，线上部署不正常显示的解决方法
lth002的博客
09-21 1831
【代码】vue3 + vite动态引入图片以及本地正常展示，线上部署不正常显示的解决方法。
vue3项目打包后不能正常显示图片
03-31
有以下几个可能的原因： 1. 图片路径问题：打包后的路径可能与开发环境下的路径不一样，导致图片无法正常显示。可以尝试使用相对路径或者绝对路径来引用图片。 2. 配置文件问题：可能是打包时没有正确配置webpack或者vue.config.js等配置文件，导致图片无法正常打包。 3. 编译问题：可能是在编译过程中出现了错误，导致打包失败或者图片无法正常显示。 解决方法： 1. 检查图片路径是否正确，尝试使用相对路径或者绝对路径引用图片。 2. 确认打包时的配置文件是否正确，可以参考官方文档或者其他资料进行设置。 3. 检查编译过程中是否有错误，可以查看控制台输出或者日志文件等信息，进行排查和修复。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

街尾杂货店&

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值