为什么我的图像没有显示，这是我第一次使用vue？

Question

我正在尝试使用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>

这是图像所在的文件夹：

这是我的网页的样子：

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

Answer 1

在src/assets内移动图像，然后使用该图像。

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

或

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

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

Answer 2

如果不想处理路径，则始终可以将其导入为模块。

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

Answer 3

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

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