Why isn't my image displaying, this is my first time using vue?

Question

I'm trying to insert my image using a b-img tag. (I'm using the bootstrap-vue library) When I do so, all I get is the little image icon.

Here is my code:

<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>

Here is the folder that the image is in:

And here is what my webpage looks like:

Does anyone have a clue as to why this isn't working?

When you run your app, look into the `src` attribute of the image. Does the file exist in that location? — Adriano, Oct 02 '19 at 20:58
I think you want to remove the leading `.`... try doing `src="/img/jawnfinder-logo.png"` — Vince, Oct 02 '19 at 21:03

score 3 · Answer 1 · answered Oct 03 '19 at 00:20

3

move your image inside src/assets then use the image.

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

or

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

Note: All the files including components,css and image should be inside src folder.

answered Oct 03 '19 at 00:20

Kenneth

2,813
3
22
46

score 0 · Answer 2 · answered Oct 02 '19 at 21:18

0

You can always import as a module if you don't want to deal with paths.

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

answered Oct 02 '19 at 21:18

DedaDev

4,441
2
21
28

score 0 · Answer 3 · answered Oct 02 '19 at 22:50

0

If you are using Vue-Loader, it won't know that src on <b-img> is a project relative URL. You need to make sure you instruct Vue Loader which props in BootstrapVue are image src props:

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

answered Oct 02 '19 at 22:50

Troy Morehouse

5,320
1
27
38

Why isn't my image displaying, this is my first time using vue?

3 Answers3