Vue.js 图片不显示 | 图片资引用 | img src 路径出错

最新推荐文章于 2025-10-22 13:49:16 发布
原创 最新推荐文章于 2025-10-22 13:49:16 发布 · 3.3w 阅读 · 10 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vuejs #图片不显示 #图片资源

本文介绍了两种在Vue项目中成功加载并显示图片的方法。一种是通过require导入图片资源，另一种则是将图片放置于static文件夹内并通过相对路径引用。
最近在Vue学习交流群里面发现很多小伙伴在想要在vue中显示图片，但是把图片写在data里面作为变量传到模板中的时候却发现图片出不了，以为是图片路径的问题，查了半天还是出不来。

解决方法

方案1： 使用require将图片进入，写法如下
logo: require('../asset/admin/logo.png')

然后再模板中：

<img :src="logo">

就可以了。

方案2：把图片放在static文件夹中，如下

这里写图片描述

然后再data里面直接这样写

logo: '../static/images/logo.png'

就可以直接使用了。

VUE3语法--img图片不显示/img的src动态赋值图片显示
雾林小妖的博客
11-27 2万+
在VUE中，img中的src动态赋值的之后，无法显示图片出现404.以及VUE中通过require访问静态资源出现的Uncaught Error: cannot module ‘asstes/logo.png’问题。
vue3 - vite项目打包部署服务器上线后图片不显示并且路径中存在undefined字眼，本地开发环境下正常显示图像没任何问题，但build编译打包后上传到线上服务器后再打开就不显示了，路径有问题
高级前端工程师
08-18 4664
vue3，vite，图片不显示，图像加载失败，打包后图片路径不对，前面多了一个undefined，本地没问题只要打包上线就报错，vue3 vite项目解决部署线上图片URL失效问题，使用本地图片打包后不显示，本地资源路径，本地图片图标，图标不显示，打包后图片失效的问题，访问图片/图标不显示的问题，vue3+vite打包后图片路径错误不显示，背景图打包之后访问路径错误问题的解决，打包部署到服务器上却显示路径undefined问题，图片url域名错误，导致无法显示，还是报错显示不了，如何解决，无效，还是不行，r
利用随机数设置网页背景 让用户迷惑
qiaoqinqie的专栏
09-16 661
vue img 动态渲染 的几种用法
最新发布
weixin_68266812的博客
10-22 183
这段代码展示了一个移动端页面的组件实现，包含商品列表和样片展示两种视图模式。商品列表采用U-radio组件实现单选功能，每项展示商品图片、标题（"299元畅享延吉公主体验"套餐）、分类和价格等信息。样片展示部分使用scroll-view实现滚动视图，每项包含背景图片和基本信息（如"民俗园打卡▪传统服饰"）。组件通过API获取数据并动态渲染，支持点击跳转和下拉加载功能。整体采用响应式设计，适应不同屏幕高度，并考虑了底部安全区域。
Vue中img的src是动态渲染时不显示的解决
10-15
今天小编就为大家分享一篇Vue中img的src是动态渲染时不显示的解决，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue :src图片不显示解决办法
SugarXiXixi的博客
11-17 5882
<el-carousel-item v-for="(item,index) in houseObj.imgList" :key="index"> <img :src="require('../../assets/image/'+item)" alt="" :size="400"> </el-carousel-item> 参考博客
解决Vue中动态src图片不显示
weixin_61945023的博客
07-21 4971
解决：Vue项目中动态绑定src图片不显示问题，需要加require（）
解决vue v-for src 图片路径问题 404
10-16
本篇分享将详细讲解如何在Vue中使用v-for循环时正确设置图片src路径，以及如何处理图片资源加载失败的问题。 首先，需要明白的是，在Vue中使用v-for指令时，图片资源的路径不能仅作为字符串处理，因为webpack在构建...
vue中当图片地址无效的时候,显示默认图片的方法
10-18
在上面的代码中，`:src="item.img"`是绑定图片源地址，`@error="imgError(item)"`表示当图片加载出错时调用`imgError`方法。在`imgError`方法中，通过`require`函数引入了默认图片，并将其路径赋值给`item.img`。 ...
vue :src 文件路径错误问题的解决方法
08-27
假设我们有一个图片列表，使用 JavaScript 动态加载图片，但发现图片不显示，错误码为 404。这是因为在 Webpack 中，图片会被当做模块来用，因为是动态加载的，所以 url-loader 无法解析图片地址，然后 npm run dev ...
前端使用 Vue.js 实现图片懒加载功能
小白菜的博客
05-10 973
图片懒加载是现代Web开发中一项重要的性能优化技术，特别是在图片密集型的网站和应用中。本文旨在全面介绍如何在Vue.js框架中实现高效、可靠的图片懒加载功能，涵盖从基础概念到高级实现的全过程。介绍图片懒加载的基本概念和原理分析传统实现与现代API的差异提供多种Vue.js实现方案进行性能对比和优化分析探讨实际应用场景和最佳实践懒加载(Lazy Loading)：延迟加载非关键资源的技术，当资源需要显示时才加载：现代浏览器提供的API，用于异步观察目标元素与祖先元素或视口的交叉状态。
Vue中图片Src使用变量的方法
10-16
主要介绍了Vue中图片Src使用变量的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
(vue):src图片不显示解决办法
nyf_unknow的博客
05-26 5463
2.把图片放在cdn上，把网络地址存在imgUrl里，然后直接去展示。3.图片放在assets文件夹，然后在data里面require进图片。1.把图片放在src同级的static文件夹下。
vue.js src图片显示不出来
m0_37817220的博客
12-17 1074
图片能正常显示是因为经过webpack处理了，（src引用的资源变成了base64的）。这是因为vue-loader做了处理。 用变量引用 var img = require(‘路径’)的方式引入资源 ...
VUE 图片:src方式引用加载不出来
weixin_52063946的博客
09-07 2247
在 vue 项目中，用src的方式引入图片，刚开始是采用这种方法： 但是图片加载不出来 错误原因：图片被浏览器识别成了 text，而不是 jpg格式，所以显示不出来 解决方法：用 require() 方法，直接传入图片编码 { id: "46", img: require("../../public/imgs/slider/slide-3.jpg"), }, 问题解决 ...
vue动态src不显示图片的问题
qq_45781961的博客
12-05 3208
data(){ return{ weather_weatherimg:'../img/' //我的路径是这样 } } this.weather_weatherimg +=data.weatherimg;//拼接之后是../img/xxx.png 路径没有错误，但是图片并不显示出来。 原因是图片不能被识别被编译。 修改为 在js数据中如何引用图片 因为webpack会将图片当做模块来引用，所以在js中需要使用require将图片引用进来，不能直接以字符串的形式。 ...
Vue——Vue中本地图片src路径对但是图片不出来的问题
qq_43201350的博客
01-09 740
Vue——Vue中本地图片src路径对但是图片不出来的问题
Vue中本地图片src路径对但是图片不出来的问题
qq_32998295的博客
02-07 2967
Vue中本地图片src路径对但是图片不出来的问题
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值