vue项目中的图片路径动态绑定问题

动态绑定

在data中引入的时候，必须使用require

{
    icon: require('@/assets/images/modules-a5.png'),
    text: '图片',
    type: 'ui-picture'
}

或者

{
    icon: require('../../assets/images/modules-picture.png'),
    text: '图片',
    type: 'ui-picture'
}

使用的时候
<img class="header-banner-img" :src="value.icon" alt="" srcset="" />

在style中

background: url(../../assets/images/entry-icon.png) 0 0 no-repeat;

普通绑定的HTML中

<img src="@/assets/images/a-1.png" alt="">或
<img src="../../assets/images/a-1.png" alt="">

总结

如果你使用动态引入的方式，图片出不来，可以按照如下方式解决
1.如果是Vue-cli3的项目，可以在public中新建一个文件夹image，然后在项目中

{
       title: "1",
       src: "/image/4.jpg" 
}

2.把图片放在cdn上，把网络地址存在imgUrl里，然后直接去展示。
3.图片放在assets文件夹，然后在data里面require进图片