关于Vue3使用本地图片显示错误

最新推荐文章于 2025-03-18 11:12:43 发布
最新推荐文章于 2025-03-18 11:12:43 发布
阅读量1.3k 收藏 1
点赞数 1
文章标签： vue.js javascript 前端 vue elementui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/m0_74037817/article/details/130581267
版权

查了很多资料，各式各样的说法都有，有的人说vue3不能使用require，但是事实并非如此，经过我的实验，发现好像只能使用require才能将本地图片显示在网页上

//这里引用了element-plus 其实和img差不多
<el-image :src="require('/src/assets/qianbao.png')"></el-image>


这样就可以显示了

一些注意事项：

  1.如果你想require( 变量 ) 可能是不行的，这也是困扰我的一个问题，比如我cosnt一个url

const im='/src/assets/qianbao.png'

然后直接放在require

<el-image :src="require(im)"></el-image>

这样显示是会有错误的，图像加载不出来但是如果：

const im='qianbao.png'

<el-image  :src="require('/src/assets/'+im)"></el-image>

这样就可以成功显示了！！

所以如果有大佬知道这是为什么，也请在评论区解释一下，谢谢！

Vue3 - vite 引入本地图片方法，页面引入本地静态资源图像详细教程，解决 UI 前端组件库的图片属性无法使用本地图像问题（无论是本地开发还是打包部署，本地图片的路径正常可用）
王二红
09-08 1万+
vue3vite引入使用本地图片，vue3vite如何引入本地资源的图片图像，vite怎么把本地的图片赋值给src图片标签属性，vue3vite使用require引入本地图像报错，vue3vite组件库的组件怎么引入本地图片，vue3vite如何给组件库的图片属性链接本地资源的图像，elementplusantdesignvue组件怎么使用本地资源的静态图片，vue3vite版本引入本地静态图片的方式，vue3+vite引入本地图片，vue3如何加载本地图片等静态资源，引入
vue项目加载本地图片无法显示解决方案
热门推荐
qq_37225921的博客
08-14 1万+
用img标签的src属性访问跨域的图片没问题可以直接显示，但是换成本地立马就显示不出来了就变成了这样子 原代码 <img src="/static/Trump.jpg" class="image"> 十分痛苦，大致分析是项目运行时寻找的跟目录和你本地项目的跟目录不是同一个，所以报错说找不到图片。 网上找了解决方案汇总 1.去build文件下的utils.js文件下某个if判断中加一行代码，记不太清了。 Javapath=…/…/ 问题来了，我们用的是vue cli3脚加创建的项目已经没有bu
vue3引入本地图片不显示
weixin_45157073的博客
06-29 1013
使用vue3 动态绑定背景图片
Vue3照片本地渲染不显示 以及照片显示失败
q77777_7的博客
03-17 1955
图片不显示原因及解决方法：assets在项目编译的过程中会被webpack处理解析为模块依赖，只支持相对路径的形式，加载图片模块通过webpack的url-loader加载器来实现，url-loader是解析不了动态绑定的src的导致最终显示的地址是未处理的地址，所以要用相对路径src引入。明明img图片在同一路径下 且路径未发生错误为什么会照片打不开。在控制台点击图片切换按钮却可以切换。现在就可以正常显示了。
Vue3中el-image组件引入本地图片加载失败
weixin_45905537的博客
03-18 712
在Vue3中引入本地图片，使用这两种方式都加载失败。最后试出了一种生效的方式。
vue3 element plus 中el-image本地图片加载失败，路径问题
qq_43378240的博客
09-12 2870
src那里要用require包起来，这样就行了。
关于Vue3渲染本地图片不显示问题
weixin_61253190的博客
12-08 1226
发现代码中虽然是@/assets/img/xxx但是在浏览器解析完成后，却变成了/src/assets/img/xxxxxx。然后我们打开浏览器，检查，找到html结构元素发现路径是正常显示的，但就是出不来图片。但是我用v-for遍历这个数组进行循环显示数据时候就出现了问题。然后，在js文件里配置了静态数据，其中image代表了文件路径。尝试，复制html元素，粘贴到代码中，尝试把js中@数据全部替换换成/src。新建一个Vue3的工程文件，在。目录下放置了一些需要的静态图片。然后测试图片是否能成功显示！
el-image本地图片不显示，提示加载失败
我是小鹏呀的博客
05-29 3263
问题描述：el-image使用本地图片不显示，提示加载失败。
vue3动态引用本地图片不生效甚是报404
weixin_49066399的博客
09-21 1263
vue3动态引用本地图片不显示控制台报404
解决Vue打包后访问图片/图标不显示的问题
10-16
在开发Vue应用的过程中，我们经常会遇到一个问题：当使用`npm run build`命令打包项目后，在线上环境运行时，图片和图标的资源无法正常显示。这个问题主要是由于打包过程中的路径问题导致的。以下将详细介绍如何解决...
vue data引入本地图片的两种方式小结
10-16
在Vue组件的`data`函数中，可以使用`require()`动态引入本地图片。`require()`是CommonJS模块系统的一个特性，它能够根据提供的路径加载模块（在这种情况下是图片资源）。以下是一个示例： ```html export ...
浅谈在vue-cli3项目中解决动态引入图片img404的问题
10-15
在Vue-cli3项目中动态引入图片时，常常会遇到图片资源无法被正确加载，浏览器显示404错误的情况。这个问题在项目中使用了动态路径来加载图片资源时尤为常见。本文将从以下几个方面深入探讨这个问题，并提供一个解决...
Vue动态加载图片在跨域时无法显示的问题及解决方法
10-15
具体到Vue项目，当图片资源的路径通过动态绑定到src属性时，由于请求被转发到了后端服务器，而图片实际上位于前端静态资源目录中，造成后端服务器返回404错误。在实际开发中，我们通常会使用Webpack工具来打包静态...
vue3++elementplus+vite显示本地图片
jidaotianzun的博客
09-21 1259
今天写项目时需要将本地图片在页面上展示，希望使用el-image组件展示，img倒也可以。由于要预览图片，所以使用el-image更方便一点。这样引入很笨，但是确实解决了问题，不仅可以使用变量保存，而且也支持img的:src和el-image的src的使用。固然，使用img的src=本地图片的相对/绝对路径可以显示图片，但是预览时就不行了，还是没有解决问题。问题：img只能直接写路径，使用变量保存路径，然后img的:src=变量名--无法加载。仅作记录，以供后用和网友参考。需求：展示本地图片并可以预览。
vue3 中使用前端本地图片
欢迎来到我的小世界
03-03 602
vue3 中使用前端本地图片
vue3本地图片加载不出来，解决方法
m0_72072486的博客
01-31 2328
先引入本地图片然后直接应用。
vue3学习12：img无法显示图片
weixin_43788986的博客
07-12 1188
无法显示图片问题解决方法，只需要加~即可。
vue 引入本地图片不显示
CD_promise的博客
06-22 2536
一般情况我们引入图片方式： 这样传过去的图片地址，在页面无法显示： 大致总结了一下原因：是由于webpack打包引起的，没打包之前，图片是在src文件夹的assets文件放置的图片，webpack不会把url路径当成依赖项进行打包，打包后，dist文件夹下并没有assets文件，所以图片加载不出来 解决方案： 先将图片从本地导入到组件中，这样webpack打包时就会把图片当做依赖进行打包，打包后会多一个图片文件夹，从而加载图片 <template> <div id="app">
在vite+vue3项目下el-image引用本地图片失败
MM_520131400的博客
05-06 3314
el-image 图片引用失败
vue3 vite 使用本地静态图片打包线上报错
最新发布
04-01
### Vue3 + Vite 项目打包后静态图片路径问题解决方案 在 Vue3 和 Vite 的项目中，如果遇到本地开发环境中能够正常加载静态图片，但在打包部署到线上环境后无法显示的情况，通常是因为静态资源路径配置不当或者构建工具未能正确处理相对路径和绝对路径的关系。 #### 1. **问题根源** Vite 使用 `import` 或者通过 `new URL()` 来导入静态资源时，会将其转换为模块 ID 并生成最终的文件名[^1]。然而，在某些情况下，动态路径拼接可能会导致未定义 (`undefined`) 被注入到路径中，从而引发错误。 --- #### 2. **解决方案** ##### 方法一：使用 `import` 导入静态资源 对于静态图片，推荐直接通过 ES Module 的方式导入图片并绑定到模板中： ```javascript // 在组件中直接 import 图片 import imgSrc from &#39;@/assets/images/example.png&#39;; export default { data() { return { imageSource: imgSrc, }; }, }; ``` 这种方式会在构建过程中自动生成正确的路径[^2]。 --- ##### 方法二：利用 `new URL()` 动态获取路径 当需要动态设置图片路径时，可以借助 JavaScript 的 `URL` 对象来确保路径正确无误： ```javascript const imagePath = new URL(&#39;@/assets/images/example.png&#39;, import.meta.url).href; export default { data() { return { imageSource: imagePath, }; }, }; ``` 此方法同样能有效避免路径中的 `undefined` 错误。 --- ##### 方法三：调整 Vite 配置以优化静态资源管理 如果上述两种方法仍无法解决问题，则需检查项目的 `vite.config.js` 文件，确认是否已合理配置静态资源的基础路径（base）。例如： ```javascript import { defineConfig } from &#39;vite&#39;; import vue from &#39;@vitejs/plugin-vue&#39;; export default defineConfig({ plugins: [vue()], base: &#39;./&#39;, // 设置基础路径，默认为 &#39;/&#39; }); ``` 注意： - 如果将应用托管在一个子目录下而非根域名，应将 `base` 修改为目标子目录名称，比如 `/subdir/`。 - 此外，还可以启用资产内联选项或将小型图片转为 Base64 编码以减少外部依赖[^3]。 --- ##### 方法四：排查 HTML 中的硬编码路径 有时开发者可能直接写死了部分 HTML 属性内的图片地址，而这些地址并未经过 Webpack/Vite 构建流程改造。因此建议统一采用模板语法渲染所有视图层内容，而不是手动指定字符串形式的 URI。 --- #### 3. **注意事项** 为了防止未来再次发生类似情况，请遵循以下最佳实践： - 尽量避免混合使用相对路径与绝对路径； - 统一维护一份全局常量表用于存储公共资源前缀； - 定期测试不同浏览器下的兼容表现以及生产模式的表现差异。 --- ### 示例代码片段 以下是完整的实现案例供参考： ```vue <template> <img :src="imageSource" alt="Example Image"> </template> <script> import imgSrc from &#39;@/assets/images/example.png&#39;; // 方式一 const dynamicPath = new URL(&#39;@/assets/images/dynamic-example.png&#39;, import.meta.url).href; // 方式二 export default { data() { return { imageSource: imgSrc, // 可替换为 dynamicPath 测试效果 }; }, }; </script> ``` ---
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值