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

[Tlin]

我参照了官网的配置写法，下面是我想问的。

<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 上提了就我用中文提的那个…………

[xingyue]

"logo": require("assets/img/logo.png")

[Tlin]

@xingyue 不行 编译不通过

[islxyqwe]

1、"logo": require("@/assets/img/logo.png")
2、assets 文件夹扔到 public 里
选一个吧

[randyo]

动态绑定本地地址没有经过 webpack 处理，你要把图片放到打包后的 assets/img/logo.png

[QingStone]

"logo": require("此处写相对路径")
再试试

[Tlin]

@xingyue
@islxyqwe
@randyo
@QingStone
我最后把它丢到 punlic 里面了，可以了………………
```"logo": require("@/assets/img/logo.png")```这种方式不行

[hanxyan12]

import DATA_LOGO from 'src/assets/img/logo.png';
data:[{logo: DATA_LOGO}]

[learnshare]

Vue 里的本地图片资源需要 import 进来，参考楼上
否则就只是字符串而已

[randyo]

@Tlin 你 build 出来看看 dist 你的图片放的位置对不对

[Btylz]

vue3 的话用 import 引进来 放在数组对象中
require 只能在 webpack 中用 vite 中没有这个方法