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

最新推荐文章于 2025-05-27 21:49:35 发布
最新推荐文章于 2025-05-27 21:49:35 发布
阅读量3.3w 收藏 10
点赞数 7
CC 4.0 BY-SA版权
分类专栏： js 文章标签： vuejs 图片不显示 图片资源
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wlonging/article/details/68068328
本文介绍了两种在Vue项目中成功加载并显示图片的方法。一种是通过require导入图片资源，另一种则是将图片放置于static文件夹内并通过相对路径引用。

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

最近在Vue学习交流群里面发现很多小伙伴在想要在vue中显示图片，但是把图片写在data里面作为变量传到模板中的时候却发现图片出不了，以为是图片路径的问题，查了半天还是出不来。

解决方法

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

然后再模板中：

<img :src="logo">

就可以了。

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

这里写图片描述

然后再data里面直接这样写

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

就可以直接使用了。

Vue中图片Src使用变量的方法
10-16
主要介绍了Vue中图片Src使用变量的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
Vue中img的src是动态渲染时不显示的解决
10-15
今天小编就为大家分享一篇Vue中img的src是动态渲染时不显示的解决，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue使用图片的四种类型
最新发布
weixin_42339193的博客
05-27 686
本文总结了Vue项目中图片加载的6种实现方式：1）静态图片使用普通img标签；2）动态图片使用:src绑定；3）webpack打包图片通过require引入；4）封装自定义图片组件处理加载状态；5）SVG矢量图标直接引入或使用组件；6）性能优化采用懒加载技术。文章详细介绍了每种方式的特点、适用场景和具体实现代码，并对比了不同场景下的推荐写法，为Vue项目中的图片处理提供了全面的解决方案。
vue中当图片地址无效的时候,显示默认图片的方法
10-18
今天小编就为大家分享一篇vue中当图片地址无效的时候,显示默认图片的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
VUE3 动态图片无法显示问题，:src=“img“
weixin_62839317的博客
03-12 406
img=new URL('@/assets/img/home/home.png', import.meta.url).href,
VUE3语法--img图片不显示/img的src动态赋值图片显示
热门推荐
雾林小妖的博客
11-27 1万+
在VUE中，img中的src动态赋值的之后，无法显示图片出现404.以及VUE中通过require访问静态资源出现的Uncaught Error: cannot module ‘asstes/logo.png’问题。
vue :src图片不显示解决办法
SugarXiXixi的博客
11-17 5819
<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 4932
解决：Vue项目中动态绑定src图片不显示问题，需要加require（）
(vue):src图片不显示解决办法
nyf_unknow的博客
05-26 5403
2.把图片放在cdn上，把网络地址存在imgUrl里，然后直接去展示。3.图片放在assets文件夹，然后在data里面require进图片。1.把图片放在src同级的static文件夹下。
vue.js src图片显示不出来
m0_37817220的博客
12-17 1049
图片能正常显示是因为经过webpack处理了，（src引用的资源变成了base64的）。这是因为vue-loader做了处理。 用变量引用 var img = require(‘路径’)的方式引入资源 ...
VUE 图片:src方式引用加载不出来
weixin_52063946的博客
09-07 2214
在 vue 项目中，用src的方式引入图片，刚开始是采用这种方法： 但是图片加载不出来 错误原因：图片被浏览器识别成了 text，而不是 jpg格式，所以显示不出来 解决方法：用 require() 方法，直接传入图片编码 { id: "46", img: require("../../public/imgs/slider/slide-3.jpg"), }, 问题解决 ...
解决vue v-for src 图片路径问题 404
10-16
本篇分享将详细讲解如何在Vue中使用v-for循环时正确设置图片src路径，以及如何处理图片资源加载失败的问题。 首先，需要明白的是，在Vue中使用v-for指令时，图片资源的路径不能仅作为字符串处理，因为webpack在构建...
vue :src 文件路径错误问题的解决方法
08-27
假设我们有一个图片列表，使用 JavaScript 动态加载图片，但发现图片不显示，错误码为 404。这是因为在 Webpack 中，图片会被当做模块来用，因为是动态加载的，所以 url-loader 无法解析图片地址，然后 npm run dev ...
前端使用 Vue.js 实现图片懒加载功能
小白菜的博客
05-10 889
图片懒加载是现代Web开发中一项重要的性能优化技术，特别是在图片密集型的网站和应用中。本文旨在全面介绍如何在Vue.js框架中实现高效、可靠的图片懒加载功能，涵盖从基础概念到高级实现的全过程。介绍图片懒加载的基本概念和原理分析传统实现与现代API的差异提供多种Vue.js实现方案进行性能对比和优化分析探讨实际应用场景和最佳实践懒加载(Lazy Loading)：延迟加载非关键资源的技术，当资源需要显示时才加载：现代浏览器提供的API，用于异步观察目标元素与祖先元素或视口的交叉状态。
vue3 - vite项目打包部署服务器上线后图片不显示并且路径中存在undefined字眼，本地开发环境下正常显示图像没任何问题，但build编译打包后上传到线上服务器后再打开就不显示了，路径有问题
高级前端工程师
08-18 4477
vue3，vite，图片不显示，图像加载失败，打包后图片路径不对，前面多了一个undefined，本地没问题只要打包上线就报错，vue3 vite项目解决部署线上图片URL失效问题，使用本地图片打包后不显示，本地资源路径，本地图片图标，图标不显示，打包后图片失效的问题，访问图片/图标不显示的问题，vue3+vite打包后图片路径错误不显示，背景图打包之后访问路径错误问题的解决，打包部署到服务器上却显示路径undefined问题，图片url域名错误，导致无法显示，还是报错显示不了，如何解决，无效，还是不行，r
vue动态src不显示图片的问题
qq_45781961的博客
12-05 3188
data(){ return{ weather_weatherimg:'../img/' //我的路径是这样 } } this.weather_weatherimg +=data.weatherimg;//拼接之后是../img/xxx.png 路径没有错误，但是图片并不显示出来。 原因是图片不能被识别被编译。 修改为 在js数据中如何引用图片 因为webpack会将图片当做模块来引用，所以在js中需要使用require将图片引用进来，不能直接以字符串的形式。 ...
Vue——Vue中本地图片src路径对但是图片不出来的问题
qq_43201350的博客
01-09 721
Vue——Vue中本地图片src路径对但是图片不出来的问题
Vue中本地图片src路径对但是图片不出来的问题
qq_32998295的博客
02-07 2939
Vue中本地图片src路径对但是图片不出来的问题
在基于spring boot +vue的宠物领养系统中，系统页面图片路径出错，页面显示不完善。
04-02
<think>嗯，用户提到了在基于Spring Boot和Vue的宠物领养系统中，系统页面图片路径出错，导致页面显示不完善。我需要先理解可能的问题来源，然后逐步分析解决方案。 首先，用户是开发者，可能对前后端分离的项目结构有一定了解，但可能在路径配置或资源处理上遇到问题。图片路径错误通常涉及前端Vue组件中的引用方式，或者后端Spring Boot的资源处理配置。 常见的情况有：前端图片路径不正确，比如相对路径和绝对路径的问题，或者构建后的路径问题。另外，后端可能没有正确配置静态资源目录，导致图片无法被访问到。还有可能是上传图片的路径处理不当，存储位置和访问路径不一致。 接下来需要分步骤思考。首先检查前端Vue部分的图片引用是否正确，比如使用绝对路径还是相对路径，尤其是在使用Webpack或Vite时，可能需要使用require或特定的别名。然后查看Spring Boot的静态资源处理，确保上传的图片存放在正确的位置，并且有对应的资源处理器。此外，跨域问题也可能导致资源加载失败，但通常跨域问题会出现在API请求，而不是静态资源，不过也不能完全排除。 还要考虑开发环境和生产环境的差异。比如，开发时前端可能通过devServer代理访问后端，而生产环境部署时路径可能不同，导致图片路径错误。另外，检查浏览器开发者工具中的网络请求，看图片的URL是否正确，是否有404错误，这能帮助定位问题所在。 可能的解决方案包括：在前端使用正确的静态资源引用方式，配置Webpack/Vite的别名；在后端确保静态资源目录配置正确，比如使用addResourceHandlers添加资源映射；检查文件上传逻辑，确保文件保存路径和访问URL匹配；处理可能的缓存问题，比如强制刷新或清除浏览器缓存；以及检查部署配置，确保前后端路径一致。 需要提醒用户具体检查这些方面，逐步排查。可能用户需要更详细的步骤，比如如何配置Vue中的publicPath，或者Spring Boot中如何添加资源处理器。还要注意不同场景下的处理，比如开发环境和生产环境的配置差异，或者使用Docker部署时的路径问题。</think>在基于Spring Boot + Vue的宠物领养系统中，图片路径出错导致页面显示不完善是常见问题。以下是分步排查与解决方案： --- ### **一、前端Vue排查** 1. **路径引用方式验证** - 若使用绝对路径：检查`public`目录引用是否正确 ```vue <!-- 正确写法 --> <img src="/img/pet-avatar.jpg"> ``` - 若使用相对路径：确保组件位置与`assets`目录层级匹配 ```vue <!-- 在src/components/下使用时 --> <img src="../assets/images/pet-avatar.jpg"> ``` 2. **构建后路径问题** - 在`vue.config.js`中配置publicPath（适用于部署子目录） ```javascript module.exports = { publicPath: process.env.NODE_ENV === 'production' ? '/your-subpath/' : '/' } ``` 3. **浏览器调试** - 打开开发者工具（F12）→ Network → 查看图片请求的404错误 - 右键检查元素→ 查看实际渲染的图片路径 --- ### **二、后端Spring Boot排查** 1. **静态资源配置** ```java @Configuration public class WebConfig implements WebMvcConfigurer { @Override public void addResourceHandlers(ResourceHandlerRegistry registry) { registry.addResourceHandler("/upload/**") .addResourceLocations("file:/opt/pet-uploads/"); } } ``` - 确认物理存储路径与代码配置一致 - Linux/Mac注意文件路径大小写敏感 2. **跨域问题（若图片来自API）** ```java @Configuration public class CorsConfig { @Bean public WebMvcConfigurer corsConfigurer() { return new WebMvcConfigurer() { @Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping("/**") .allowedOrigins("*") .allowedMethods("*"); } }; } } ``` --- ### **三、文件上传场景特殊处理** 1. **存储路径与访问路径映射** - 上传保存路径：`/var/www/pet/images/2023/08/abc.jpg` - 对应访问URL应为：`http://domain.com/images/2023/08/abc.jpg` 2. **路径拼接建议** ```java // 避免硬编码路径 String uploadDir = System.getProperty("user.dir") + "/uploads/"; ``` --- ### **四、典型错误案例** 1. **开发/生产环境差异** - 开发环境：图片存在`src/assets` - 生产环境：需通过nginx配置静态资源路径 2. **Docker部署路径** ```dock
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值