Images in any folder won't show up

Ionic Framework Ionic Vue
1

This probably looks like a stupid question, but how do you show a picture from an asset folder?

I tried changing the location of that picture several times, but the picture never shows up on the actual page (always shows a broken picture icon).

Here are the locations

page >> …src/views/Login.vue
image>> …src/assets/img/LoginImg.jpg

It doesn’t matter if I use a string directly into the “src” of the “img” tag or pass it through a const, I even tried with an absolute path, but still got a broken image icon.

The only way I can get any picture to show up is with a picture URL (obviously online only), but it should be offline.

Any help would be appreciate.

2 
 <img src="@/assets/img/LoginImg.jpg"/>
1 Like
3

<img :src='require("@/assets/img/LoginImg.jpg")'/>

2 Likes
4

Why would you do this? I don’t understand, require should not be required, webpack should parse html for @ paths on its own.

5

@rlouie - Because it works?

1 Like
6

I saw people have it works that way but mine doesn’t :expressionless: not sure why

7

A good place to look would also be this Vue CLI docs page: HTML and Static Assets | Vue CLI

There may be some Vue 2 references, but how you include static assets should largely be the same.

8

just worked through this same issue because the course I was following id not touch on any of the following or relative path resolution for static images

WebPack, PublicPath, <%= BASE_URL %> ,process.env.BASE_URL

generally if your image is in the public folder you should be able to reference it at /