vue-cli3+bootstrap-vue 通过 v-for 循环绑定 src 加载本地的图片失败
Tlin · 2020-03-11 07:27:23 +08:00 · 5836 次点击这是一个创建于 1744 天前的主题，其中的信息可能已经有所发展或是发生改变。
我参照了官网的配置写法，下面是我想问的。
<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 上提了就我用中文提的那个…………
10 条回复 • 2023-08-16 17:41:39 +08:00
 |
1
xingyue 2020-03-11 07:33:32 +08:00 via Android
"logo": require("assets/img/logo.png")
|
 |
3
islxyqwe 2020-03-11 08:09:42 +08:00
1、"logo": require("@/assets/img/logo.png")
2、assets 文件夹扔到 public 里 选一个吧 |
 |
4
randyo 2020-03-11 08:19:14 +08:00 via Android
动态绑定本地地址没有经过 webpack 处理，你要把图片放到打包后的 assets/img/logo.png
|
 |
5
QingStone 2020-03-11 08:41:52 +08:00 via Android
"logo": require("此处写相对路径")
再试试 |
 |
6
Tlin OP |
 |
7
hanxyan12 2020-03-11 09:37:09 +08:00
import DATA_LOGO from 'src/assets/img/logo.png';
data:[{logo: DATA_LOGO}] |
 |
8
learnshare 2020-03-11 10:18:10 +08:00
Vue 里的本地图片资源需要 import 进来，参考楼上
否则就只是字符串而已 |
 |
10
Btylz 2023-08-16 17:41:39 +08:00
vue3 的话用 import 引进来 放在数组对象中
require 只能在 webpack 中用 vite 中没有这个方法 |
Select Language