V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
Tlin
V2EX  ›  Bootstrap

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

  •  
  •   Tlin · 2020-03-11 07:27:23 +08:00 · 5846 次点击
    这是一个创建于 1751 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

    <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
    xingyue
        1
    xingyue  
       2020-03-11 07:33:32 +08:00 via Android
    "logo": require("assets/img/logo.png")
    Tlin
        2
    Tlin  
    OP
       2020-03-11 08:02:45 +08:00
    @xingyue 不行 编译不通过
    islxyqwe
        3
    islxyqwe  
       2020-03-11 08:09:42 +08:00
    1、"logo": require("@/assets/img/logo.png")
    2、assets 文件夹扔到 public 里
    选一个吧
    randyo
        4
    randyo  
       2020-03-11 08:19:14 +08:00 via Android
    动态绑定本地地址没有经过 webpack 处理,你要把图片放到打包后的 assets/img/logo.png
    QingStone
        5
    QingStone  
       2020-03-11 08:41:52 +08:00 via Android
    "logo": require("此处写相对路径")
    再试试
    Tlin
        6
    Tlin  
    OP
       2020-03-11 08:58:26 +08:00
    @xingyue
    @islxyqwe
    @randyo
    @QingStone
    我最后把它丢到 punlic 里面了,可以了………………
    ```"logo": require("@/assets/img/logo.png")```这种方式不行
    hanxyan12
        7
    hanxyan12  
       2020-03-11 09:37:09 +08:00
    import DATA_LOGO from 'src/assets/img/logo.png';
    data:[{logo: DATA_LOGO}]
    learnshare
        8
    learnshare  
       2020-03-11 10:18:10 +08:00
    Vue 里的本地图片资源需要 import 进来,参考楼上
    否则就只是字符串而已
    randyo
        9
    randyo  
       2020-03-11 10:49:54 +08:00 via Android
    @Tlin 你 build 出来看看 dist 你的图片放的位置对不对
    Btylz
        10
    Btylz  
       2023-08-16 17:41:39 +08:00
    vue3 的话用 import 引进来 放在数组对象中
    require 只能在 webpack 中用 vite 中没有这个方法
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1166 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 19ms · UTC 18:29 · PVG 02:29 · LAX 10:29 · JFK 13:29
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.