vue 图片不显示，引用路径出错

最新推荐文章于 2025-05-27 21:49:35 发布
原创 最新推荐文章于 2025-05-27 21:49:35 发布 · 3.5k 阅读 · 2 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍了在使用Webpack打包项目时，遇到的图片无法正常显示的问题及其解决方案。提供了两种方法：一是通过require导入图片；二是将图片放置于static文件夹内并直接引用。

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

在做项目中，遇到把img图片作为变量放在data里，引用会发现图片不显示，以为是路径的问题，其实是webpack的事。

方案1： 使用require将图片进入，写法如下
image: require('../../assets/img/mine.png')

模板：

<img :src="image">
方案2：把图片放在static文件夹中，如下

然后直接在data里面这样写

image：'../../static/img/mine.png'

vue3 - vite项目打包部署服务器上线后图片不显示并且路径中存在undefined字眼，本地开发环境下正常显示图像没任何问题，但build编译打包后上传到线上服务器后再打开就不显示了，路径有问题
高级前端工程师
08-18 4510
vue3，vite，图片不显示，图像加载失败，打包后图片路径不对，前面多了一个undefined，本地没问题只要打包上线就报错，vue3 vite项目解决部署线上图片URL失效问题，使用本地图片打包后不显示，本地资源路径，本地图片图标，图标不显示，打包后图片失效的问题，访问图片/图标不显示的问题，vue3+vite打包后图片路径错误不显示，背景图打包之后访问路径错误问题的解决，打包部署到服务器上却显示路径undefined问题，图片url域名错误，导致无法显示，还是报错显示不了，如何解决，无效，还是不行，r
Vue项目中使用require的方式导入图片资源，本地运行无法打开的问题
qq_41373791的博客
10-24 919
无意中发现，项目中一个require导入的图片图标，在file协议下居然可以正常显示，然后就比对了一下不同之处，发现这个图标图片打包的时候被编译成了base64了。于是就查了base64图片的特殊之处，查找得知base64格式的图片是不需要发请求获取的（一般是减少页面请求优化的手段之一，但是存在会使图片体积增加的问题）。其中有一块需要展示一个拓扑图，绘制拓扑图时用了定义了一个图片节点，然后图片的导入方式是 require的方式，然后本地npm run dev启动的时候可以正常显示，没有任何问题。
vue 解决data中定义图片相对路径页面不显示的问题
10-14
主要介绍了vue 解决data中定义图片相对路径页面不显示的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
解决vue项目运行后使用require()图片也不显示方法
z2428478096的博客
11-17 7920
最近在写vue项目时发现一个问题，在项目运行打包后却没有显示图片，明明路径也是正确的。在网上查询大部分文档都是说使用require(‘图片路径’)可以进行解决，运用到项目中发现还是没有用，到后面我对require方法进行查询后，得到了解决办法。 比如：我在assets下的images存放了图片，运行后 这样不显示 解决办法： <img class="headimg" :src="require(imgurl2)">使用require('图片存放目录' + 图片地址...
vue使用图片的四种类型
最新发布
weixin_42339193的博客
05-27 841
本文总结了Vue项目中图片加载的6种实现方式：1）静态图片使用普通img标签；2）动态图片使用:src绑定；3）webpack打包图片通过require引入；4）封装自定义图片组件处理加载状态；5）SVG矢量图标直接引入或使用组件；6）性能优化采用懒加载技术。文章详细介绍了每种方式的特点、适用场景和具体实现代码，并对比了不同场景下的推荐写法，为Vue项目中的图片处理提供了全面的解决方案。
vue3循环引入图片不显示问题 require无法使用问题
前端程序猿的博客
03-13 1837
【代码】vue3使用require。
vue项目动态引入图片无法显示的问题
qq_53987671的博客
08-01 4180
vue项目动态引入图片不显示的问题解决
vue中动态引入加载图片不显示
fxshy的博客
09-15 745
vue中动态加载图片不显示
解决Vue打包之后文件路径出错的问题
08-27
本文将深入探讨如何解决Vue打包后文件路径出错的问题。 首先，我们来分析问题的原因。Vue CLI在构建项目时，会根据配置文件进行一系列优化，包括代码分割、压缩等。其中，静态资源的路径处理是关键部分。默认情况下...
关于Vue背景图打包之后访问路径错误问题的解决
08-28
Vue背景图打包之后访问路径错误问题的解决 在 Vue 项目中，背景图打包之后访问路径...解决 Vue 背景图打包之后访问路径错误问题的关键是理解背景图片和图片 img 的区别，并且选择合适的解决方案来避免路径错误的问题。
vue webpack打包后图片路径错误的完美解决方法
12-08
因为我们的图片路径都是经历过文件夹的，在本地引用图片是绝对路径，但打包后因为把配置的static文件夹当成了根路径，所以很多图片找不到都不显示。 解决办法如图： (1). 修改 assetsPublicPath: ‘./’ (2).打开...
vue :src 文件路径错误问题的解决方法
08-27
假设我们有一个图片列表，使用 JavaScript 动态加载图片，但发现图片不显示，错误码为 404。这是因为在 Webpack 中，图片会被当做模块来用，因为是动态加载的，所以 url-loader 无法解析图片地址，然后 npm run dev ...
vue中，加载稍微大点的图片，本地测试没问题，打包后不显示。
04-12
vue中，加载稍微大点的图片，本地测试没问题，打包后不显示。 1、检查图片是否存在； 2、检查图片引入方式是否正确 import或者require引入 3、图片编码后太大，超过默认设置，需要在 webpack.base.conf.js文件中修改限制。
mine:扫雷代码实现，结合Vue框架
05-11
Mine 扫雷代码实现，结合Vue框架实现页面数据绑定 核心代码mine.js
Vue中img的src是动态渲染时不显示的解决
01-19
今天在项目中遇到一个需求，设计稿如下 就是展示用户头像，数据从后端获取，要是没有拿到则显示默认图片。 项目采用vue开发，本人也是第一次在实际项目中使用vue。 自然而然采用条件渲染，我的代码如下： 保存运行查看，发现没显示默认的图片，审查元素发现图片没有被打包 有点懵~ 后来查阅资料发现图片使用require引入即可，更改后代码为： 搞定~ 以上这篇Vue中img的src是动态渲染时不显示的解决就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持软件开发网。
vue中图片不显示问题 - vue中静态资源加载
好好学习天天向上
01-24 5590
变量的值，该变量的值就是一个字符串，所以最后显示的是字符串没有解析地址去获取图片。是一个 ESM 的原生功能，会暴露当前模块的 URL。require是在运行时加载，import是编译时加载。中会将图片来当做模块来用，因为是动态加载的，所以。为了能让Webpack返回正确的资源路径，使用。根据结果来看，相对地址没有被解析。这里的错误原因理解的是动态绑定。进行解析，然后返回处理过的。进行解析，然后返回处理过的。解析到的路径都会被解析为。提供的一种加载能力，但是。提供的静态资源载入方法，
vue-cli build 打包图片加载失败
HGGshiwo的博客
07-22 598
新版的vue-cli，图片位置放在assets下，通过./assets/xxx.png进行引用。 打包时出现404，此时在工程目录中新建vue.config.js 添加 module.exports = { publicPath: './' } 重新build 即可。
问题描述：vue项目中引用data中的图片路径无法显示
weixin_45629646的博客
03-01 1057
vue项目中引用data中图片路径无法显示
vue 学习中坑（读取本地的图片，不展示的问题）
汪原野
03-11 2974
1，读取本地图片 如果是在assets里面的图片资源需要require的 <img class="goods-image" :src="require('../assets/'+item.img)" alt="" /> 或者 <img class="goods-image" :src="require('@/assets/'+item.img)" alt="" />...
vue2 打包后 dist文件路径出错
03-30
可能是你的配置文件中没有正确设置打包后的文件路径，或者在使用时没有正确引用路径。 如果你使用的是 vue-cli，可以检查一下 `vue.config.js` 文件中的配置是否正确设置了 `outputDir`，例如： ``` module....
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值