vue 使用mint-ui v-bind绑定图片地址，图片无法显示的问题

最新推荐文章于 2023-02-04 22:05:07 发布
最新推荐文章于 2023-02-04 22:05:07 发布
阅读量716 收藏 2
点赞数 1
文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_29167629/article/details/102597189
版权

如下图为例，通过v-bind绑定图片地址时，使用一般路径（没有require）是无法正常显示图片的，因为这样做无法调用相关loader来解析图片。
在这里插入图片描述解决方法：通过require（‘‘xxx/xxx.png’’）来代替原本的图片地址

BF黑羽
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
【vue】问题记录1 用v-bind绑定img的图片，使用网络接口图片无法显示，报错403
Voiceu的博客
03-09 1213
背景如题， 学v-bind 的时候用了img的src来绑定csdn的头像图片，结果一直显示不出， 我vscode右键用服务器运行和右键直接运行，出现了两种情况，有本地服务器的时候，不能显示图片，并且查看network的时候，发现403，网上的解决方案都是基于本地图片的，所以那些答案都是说的路径问题，比如引入require来解决，并不能解决我的问题，我这个查了请求头的，地址是对的，但是返回403，所以应该是csdn做了防盗链的处理， 所以我尝试换了掘金的图片来看看猜想是不是正确，结果果然是可以正常显示的，所以
（已解决）VUE中网络资源图片加载失败
最新发布
cnhyls的博客
05-06 287
在vue3中，使用v-bind绑定图片的src属性，浏览器正常能正常渲染出来 ，但是图片加载不出来。在index.html文件中加入如下代码。
Vue中v-bind:src无效
weixin_43824519的博客
06-07 1219
vue中v-bind:src,图片无法正常显示 2021年6月7号，自己没事敲点代码，准备激发激发灵感，做一个好项目，顺便复习下vue, 发现当我在data中模拟json数据的时候，图片链接在页面上无法正常显示 用了各种方法，都无法正常使用，最后上网才发现是需要引入的问题。 附上代码 // template <img :src="imgLink" alt=""> // script data () { return { // 注：引入之后，相对路径及绝对路径均可以使用
【Vue】img的src使用了v-bind后报错
Shino_jie的博客
06-19 532
报错信息：找不到图片原因：大概是vue脚手架运行项目时，项目被打包后在浏览器里路径就不一致了？解决办法：在data里的url使用require导入图片就能正常使用了
vue-shop:vue + mint-ui 商城 适合刚学vue的朋友
05-09
【Vue.js 框架与 Mint-UI 库】 Vue.js 是一款轻量级的前端JavaScript框架，由尤雨溪开发，旨在简化Web应用的构建。Vue的核心库专注于视图层，易于上手且便于与现有项目整合。它提供了一套指令系统、组件化、虚拟DOM...
vue写的用Mint-Ui基础上写的 高仿QQMusic.zip
09-05
在这个项目“vue写的用Mint-Ui基础上写的 高仿QQMusic.zip”中，开发者使用 Vue.js 和 Mint UI 实现了一个高仿QQ音乐的应用。这个项目不仅展示了 Vue.js 的核心特性，如数据绑定、组件系统和指令，还充分运用了 Mint...
基于vue+mint-ui的单页面HTML5简历，让自己的简历变得不一般.zip
02-14
在简历项目中，Vue实例、组件、指令（如v-bind、v-if、v-for）、计算属性和方法等都会被广泛使用。 2. **Mint UI**：Mint UI 提供了预设样式和交互效果的UI组件，如Cell、Button、Form、Toast等，使得开发者能够...
Vue+mintUI的demo
06-30
Vue框架提供了丰富的指令系统，如v-if、v-for、v-bind和v-on等，使得数据绑定和事件处理变得直观。 Mint UI 是基于Vue.js的一套移动端UI组件库，它由饿了么团队开发并维护。Mint UI设计风格简洁，组件丰富，包括...
Vue全家桶MintUi打造高仿QQMusic
08-10
指令系统如v-bind和v-if使得数据绑定和条件渲染变得简单。虚拟DOM则提升了性能，减少对实际DOM的操作。 接下来，Vuex作为Vue的状态管理库，用于集中管理应用的状态。在QQMusic项目中，可能包含歌曲列表、当前播放...
Vue 通过 v-bind 绑定图片src的两种方式
一名假人的博客
07-30 8106
前提声明 这个问题的解决是在vue-cli3下，因为问候提到的public文件夹是3版本产生的 在学习vue时，有一个需求是需要 v-for 循环图片，之后用一个图片地址数组通过（v-bind）去绑定图片的src，这个地方有一个大坑 错误写法 //错误写法 <div id='app'> <!-- 通过v-for循环遍历data中的地址 并绑定 --> <im...
Vue项目中使用v-bind引入图片路径出现图片未找到的问题
violetjack的专栏
06-27 4453
问题 由于项目图片在打包后图片名会跟上一串hash值，并且相对路径会改变。所以： &lt;img src="../../assets/logo.png"/&gt; 这么写是可以的，因为打包的时候会自动锁定图片路径。 &lt;img :src="url"/&gt; data { url: '../../assets/logo.png' } 这么写就会出现图片路径不对，无法找到...
vue项目跳转后排版错乱 刷新会好
weixin_45172409的博客
06-28 688
路由跳转后排版错乱
vue：v-bind访问数组下标方式，动态绑定属性值，导致无法报错或无法正常显示图片
前后端杂货铺
05-31 474
vue：v-bind访问数组下标方式，动态绑定属性值，导致无法报错或无法正常显示图片 原因：受javascript的特性影响，使用数组下标方式访问是不会触发vue的数据绑定： 可以采用这种方式： <img :src="img1"> new Vue(){ data(){ return{ imgs:["","","",""], img1:"",//在得到图片地址后赋值img1 } } methods:{ } } ...
vue项目里背景图片打包上线后出错
Lycoriy的博客
02-25 477
1、问题 用vue-cli构建的项目，在build打包上线后，背景图片路径解析出错，导致上线后的项目背景图片无法显示。 2、原因 在vue-cli构建项目后，有两种运行方法： npm run dev: 开发环境，资源使用绝对路径，可以看到正常的背景图片； npm run build: 打包项目，相对路径，上线后路径解析错误。 注意：通过img标签引入的图片是正常的，因为img标签是html标签，路...
:class v-bind class没有效果 无效果
wsy12123_的博客
11-26 1778
v-bind class失效的原因之一 :class 无效果的原因之一
Vue——绑定图片路径使用相对路径图片显示不出的解决方案
CaseyWei
12-07 814
Vue——绑定图片路径使用相对路径图片显示不出的解决方案
v-show v-if v-bind指令 图片切换案例
m0_55751104的博客
02-04 638
用v-show 根据索引的值来进行布偶判断，让图片，在索引不等于0的时候进行切换，小于数组数一位的时候进行停止切换。绑定src属性：用v-bind 指令 在src属性中，v-bind不写出来，用 ：号。在script写方法，用this调出索引的数据，进行减法，加法。是通过操作元素本身来显示，也是操作布尔元素来进行判断。接着在div里添加点击事件，调用方法。操作显示状态，通过操作样式来实现。定义数组图片 ：imgArr。添加图片索引：index。
Vue框架的学习(Vue操作指令学习三 V-bind )第三课
qq_56248592的博客
11-11 735
V-bind
解决Vue中Element-UI组件使用常见问题
"关于在Vue项目中使用Element-UI框架时可能遇到的问题及解决方案的文档" Element-UI是基于Vue.js的一个流行前端组件库，提供了丰富的UI组件，如表格、按钮、下拉菜单等，用于快速构建美观的企业级前端应用。在实际...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值