Почему мое изображение не отображается, я впервые использую 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

Если вы используете Vue-Loader, он не будет знать, что src на <b-img> является относительным URL проекта. Вам необходимо убедиться, что вы указали Vue Loader, какие реквизиты в BootstrapVue являются image src props:

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

Answer 3

Вы всегда можете импортировать как модуль, если не хотите иметь дело с путями.

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