为什么我的图片不显示，这是我第一次使用 vue？答案

【问题标题】：Why isn't my image displaying, this is my first time using vue?为什么我的图片不显示，这是我第一次使用 vue？
【发布时间】：2019-10-02 20:33:52
【问题描述】：

我正在尝试使用 b-img 标签插入我的图像。（我正在使用 bootstrap-vue 库）当我这样做时，我得到的只是小图像图标。

这是我的代码：

<template>
    <div>
        <b-img src="./img/jawnfinder-logo.png"></b-img>
        <b-nav>
            <b-button variant="primary">Sign-Up</b-button>
            <b-button variant="primary">Login</b-button>
        </b-nav>
    </div>
</template>

这是图片所在的文件夹：

这是我的网页的样子：

有没有人知道为什么这不起作用？

【问题讨论】：

可能是因为您的img 目录不在public...？
这并没有什么不同
当你运行你的应用时，查看图片的src属性。该文件是否存在于该位置？
我想你想删除领先的....试试src="/img/jawnfinder-logo.png"

标签： html vue.js bootstrap-vue

【解决方案1】：

将您的图片移入src/assets，然后使用该图片。

<img alt="Vue logo" src="@/assets/jawnfinder-logo.png">

或

<b-img src="@/assets/jawnfinder-logo.png"></b-img>

注意：所有的文件，包括组件、css和图像都应该在src文件夹中。

【讨论】：

【解决方案2】：

如果您不想处理路径，您始终可以作为模块导入。

<b-img :src="require('./img/jawnfinder-logo.png')"></b-img>

【讨论】：

【解决方案3】：

如果您使用的是 Vue-Loader，它不会知道 <b-img> 上的 src 是一个项目相对 URL。您需要确保指示 Vue Loader BootstrapVue 中的哪些道具是图像src 道具：

https://bootstrap-vue.js.org/docs/reference/images

【讨论】：