vue-cli3+bootstrap-vue 通过 v-for 循环绑定 src 加载本地的图片失败

This topic created in 2253 days ago, the information mentioned may be changed or developed.

<div v-for="item in data" :key="item.id">
   <b-img-lazy width="30" height="30" alt="ico" :src="item.logo"></b-img-lazy>
</div>

本地图片：src/assets/img/logo.png 本地编写的数据：

data : [{
    "id": "001",
    "title": "person",
    "logo":"assets/img/logo.png"
}]

如果按以上循环绑定本地的图片就会显示失败，如果图片为网络地址就会成功，如： "logo":"https://picsum.photos/600/400/?image=94" 我开始以为是我本地数据的地址写错了，但无论我怎么改还是没有显示出来。难道不能循环绑定 src 吗？我看给的示例是绑定网络上的地址：

<b-img-lazy v-bind="mainProps" :src="getImageUrl(80)" alt="Image 1"></b-img-lazy>
getImageUrl(imageId) {
        const { width, height } = this.mainProps
        return `https://picsum.photos/${width}/${height}/?image=${imageId}`
}

我也使用过这种写法来绑定本地的数据，但仍旧不行。目前在在国内的网上很难找到 bootstrap-vue 的相关问题解决方案，不知有老哥遇到过没，真是头大！我也在 bootstrap-vue 的 github 上提了就我用中文提的那个…………

src

b-img-lazy

绑定

v-for

10 replies • 2023-08-16 17:41:39 +08:00