Vue用v-for给src属性赋值

版权声明：非经本人同意，请勿转载。 https://blog.csdn.net/QQ_Empire/article/details/82221777

一、为模板内<img>标签添加图片路径方法

       1，在data里require引入图片路径（如下）

data(){
      return {
        str:"首页",
        msg: "",
        touimg:require("../../static/222.jpg")

      }
    }

    2，在标签绑定即可

<img :src="touimg">

 

二、从服务器获取图片路径

我的代码结构如下面代码所示，无法执行，在img中的src属性中无法用mustache表示法

<div id="test">
    <div v-for="item in lists">
        <img src="{{item.img}}">
    </div>
</div>

new Vue({
    el: "#test",
    data: function () {
        return {
            lists: [
                { img : 'img1' },
                { img : 'img2' },
                { img : 'img3' },
                { img : 'img4' }                
            ]
        }
    },
})

后来我将html中的代码改成如下

<div id="test">
    <div v-for="item in lists">
        <img v-bind:src="item.img">
    </div>
</div>

ok大功告成，图片显示出来了

《剧终》