专栏首页python3vue v-for循环解决img标签的src动态绑定问题

vue v-for循环解决img标签的src动态绑定问题

一、概述

示例代码:

<template>
  <div>
    <div v-for="(item,index) in product">
      <img src="{{ item.imgSrc }}" alt="">
    </div>
  </div>
</template>

发现这样运行会报错

二、解决方法

img标签动态绑定src

<template>
  <div>
    <div v-for="(item,index) in product">
      <img :src="item.imgSrc" alt="">
    </div>
  </div>
</template>

完整代码如下:

<template>
  <div>
    <div v-for="(item,index) in product">
      <img :src="item.imgSrc" alt="">
    </div>
  </div>
</template>

<script>
    export default {
      name: "test",
      data() {
        return {
          product:[
            {
              id:"1",
              imgSrc:"http://www.py3study.com/Public/images/article/thumb/random/158.jpg",
            },
            {
              id:"2",
              imgSrc:"http://www.py3study.com/Public/images/article/thumb/random/159.jpg",
            },
            {
              id:"3",
              imgSrc:"http://www.py3study.com/Public/images/article/thumb/random/160.jpg",
            },
          ],
        };
      },
    }
</script>

<style scoped>

</style>

总结:主要是图片位置的问题,图片存放在什么位置,能够让img通过src动态的绑定对应的值

其次是图片配置路径的问题,若图片就和响应的vue在同一个文件,直接通过 ./logo.png 是只能写死的情况下显示,而动态的:src绑定是无法完成这种情况的显示。

本文参考链接:

https://blog.csdn.net/qq_41860497/article/details/100059721

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 实现一个Vue自定义指令懒加载

    当我们向下滚动的时候图片资源才被请求到,这也就是我们本次要实现的效果,进入页面的时候,只请求可视区域的图片资源这也就是懒加载。

    木子星兮
  • 【第一季】Vue2.0内部指令

    学习这套课程你需要的前置知识: HTML的基础知识,你需要达到中级水平,写前端页面的结构代码完全没有问题。 CSS的基础知识,最好做过半年以上的切图和布局,最...

    用户1212940
  • 前端面试知识点

    允许用户传递一个callback参数给服务端,然后服务端返回数据时会将这个callback参数作为函数名来包裹住JSON数据,这样客户端就可以随意定制自己的函数...

    Daotin
  • 2. Vue语法--插值操作&动态绑定属性 详解

    其实这就是一个代码的模板. 那么我们如何才能快速的创建这样的代码,而不是每次都手写呢? 将其创建为模板.

    用户7798898
  • [Vue 牛刀小试]:第二章 - 常见的指令的使用

      在上一章中,我们了解了一些在使用 Vue 进行开发中经常会遇到的基础概念,与传统的前端开发不同,Vue 可以使我们不必再使用 JavaScript 去操作 ...

    程序员宇说
  • 一周精通Vue(一)

    巴黎香榭
  • 包学会之浅入浅出Vue.js:升学篇

    上一篇《包学会之浅入浅出Vue.js:开学篇》中,我们初步了解单页面组件这个概念,现在通过一个项目,来进一步解析组件的应用吧。

    蔡述雄
  • Vue 2.0 学习总结,精华全在这里了

    摘要:年后公司项目开始上vue2.0,自己对学习进行了总结,希望对大家有帮助! 1Vue 介绍 Vue 是什么? https://vuefe.cn/guide ...

    码云Gitee
  • vue2.5入门(推荐,差代码) 原

    晓歌

扫码关注云+社区

领取腾讯云代金券