vue项目动态绑定图片的src的属性

1.<img :src="imgUrl"/>

imgUrl路径不可写中文

export default{ data(){ return{ imgUrl:'../../assets/01.png' } } }

这样写图片根本显示不出来，只是显示了个图片的标志

正确写法

export default{ data(){ return{ imgUrl:require('../../assets/01.png') } } }

import imgUrl from '@/assets/01.png' export default{ data(){ return{ imgUrl:imgUrl } } }

2.当以src属性绑定的时候 :src="{{ item.pro_img }}"，浏览器报错。

productList: [ { ... // 'pro_img': '../assets/product.png',//图片链接 } ]

报错原因：在img中的src属性中无法用mustache表示法

1.应改为：<img :src="item.pro_img" alt="">

<img :src="item.pro_img" alt="">

      productList: [
        {
        ...

          'pro_img': '../../static/product.png',//图片链接
        }
      ]
2.

<img :src="item.pro_img" alt="">

      productList: [
        {
        ...

          'pro_img': require('../assets/product.png'),//图片链接

        }
      ]