vue-cli3+bootstrap-vue 通过 v-for 循环绑定 src 加载本地的图片失败
Tlin 2020-03-11 07:27:23 +08:00 6301 次点击这是一个创建于 2039 天前的主题，其中的信息可能已经有所发展或是发生改变。
我参照了官网的配置写法，下面是我想问的。
<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