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

最新推荐文章于 2024-08-18 16:14:02 发布
最新推荐文章于 2024-08-18 16:14:02 发布
阅读量3.3w 收藏 10
点赞数 6
分类专栏： js 文章标签： vuejs 图片不显示 图片资源
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wlonging/article/details/68068328
版权
最近在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 1万+
在VUE中，img中的src动态赋值的之后，无法显示图片出现404.以及VUE中通过require访问静态资源出现的Uncaught Error: cannot module ‘asstes/logo.png’问题。
vue :src图片不显示解决办法
SugarXiXixi的博客
11-17 5581
<el-carousel-item v-for="(item,index) in houseObj.imgList" :key="index"> <img :src="require('../../assets/image/'+item)" alt="" :size="400"> </el-carousel-item> 参考博客
vue3: img标签src属性动态设置资源路径
XL_0502的博客
08-16 2494
vite中默认支持ESM方式加载模块，没有require相关方法。补充两个方法。方法 require()Node.JS 原生方法 ，以CommonJS方式加载模块/文件/图片；Webpack 默认支持 ，Vite不支持；方法 require.context()Webpack 特定方法，此方法可实现自定义上下文；Vite不支持；
解决Vue中动态src图片不显示
weixin_61945023的博客
07-21 4801
解决：Vue项目中动态绑定src图片不显示问题，需要加require（）
(vue):src图片不显示解决办法
nyf_unknow的博客
05-26 4903
2.把图片放在cdn上，把网络地址存在imgUrl里，然后直接去展示。3.图片放在assets文件夹，然后在data里面require进图片。1.把图片放在src同级的static文件夹下。
vue.js src图片显示不出来
m0_37817220的博客
12-17 992
图片能正常显示是因为经过webpack处理了，（src引用的资源变成了base64的）。这是因为vue-loader做了处理。 用变量引用 var img = require(‘路径’)的方式引入资源 ...
解决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中当图片地址无效的时候,显示默认图片的方法
10-18
在上面的代码中，`:src="item.img"`是绑定图片源地址，`@error="imgError(item)"`表示当图片加载出错时调用`imgError`方法。在`imgError`方法中，通过`require`函数引入了默认图片，并将其路径赋值给`item.img`。 ...
解决vue打包之后静态资源图片失效的问题
11-27
这里要注意，路径前的斜杠表示从根目录开始查找，但即使这样，如果`static`目录不在`src`内，依然会导致图片失效。因此，最佳实践是将`static`放入`src`目录下，如： ``` src/ |-- static/ | |-- images/ | |-- ...
vue3 - vite项目打包部署服务器上线后图片不显示并且路径中存在undefined字眼，本地开发环境下正常显示图像没任何问题，但build编译打包后上传到线上服务器后再打开就不显示了，路径有问题
最新发布
高级前端工程师
08-18 3843
vue3，vite，图片不显示，图像加载失败，打包后图片路径不对，前面多了一个undefined，本地没问题只要打包上线就报错，vue3 vite项目解决部署线上图片URL失效问题，使用本地图片打包后不显示，本地资源路径，本地图片图标，图标不显示，打包后图片失效的问题，访问图片/图标不显示的问题，vue3+vite打包后图片路径错误不显示，背景图打包之后访问路径错误问题的解决，打包部署到服务器上却显示路径undefined问题，图片url域名错误，导致无法显示，还是报错显示不了，如何解决，无效，还是不行，r
Vue中img的src是动态渲染时不显示的解决
10-15
今天小编就为大家分享一篇Vue中img的src是动态渲染时不显示的解决，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Vue中图片Src使用变量的方法
10-16
主要介绍了Vue中图片Src使用变量的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
VUE 图片:src方式引用加载不出来
weixin_52063946的博客
09-07 2155
在 vue 项目中，用src的方式引入图片，刚开始是采用这种方法： 但是图片加载不出来 错误原因：图片被浏览器识别成了 text，而不是 jpg格式，所以显示不出来 解决方法：用 require() 方法，直接传入图片编码 { id: "46", img: require("../../public/imgs/slider/slide-3.jpg"), }, 问题解决 ...
vue动态src不显示图片的问题
qq_45781961的博客
12-05 3110
data(){ return{ weather_weatherimg:'../img/' //我的路径是这样 } } this.weather_weatherimg +=data.weatherimg;//拼接之后是../img/xxx.png 路径没有错误，但是图片并不显示出来。 原因是图片不能被识别被编译。 修改为 在js数据中如何引用图片 因为webpack会将图片当做模块来引用，所以在js中需要使用require将图片引用进来，不能直接以字符串的形式。 ...
Vue——Vue中本地图片src路径对但是图片不出来的问题
qq_43201350的博客
01-09 658
Vue——Vue中本地图片src路径对但是图片不出来的问题
Vue中本地图片src路径对但是图片不出来的问题
qq_32998295的博客
02-07 2790
Vue中本地图片src路径对但是图片不出来的问题
vue :src本地图片不读取
weixin_34245082的博客
03-06 3980
修改方式： 　　使用require（‘文件名’） 转载于:https://www.cnblogs.com/hzx-5/p/10482391.html
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值