动态绑定
在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进图片