Proper way to reference images inside a vue component in laravel

Question

I have this Vue component inside resources/js/components in my laravel project, and I'm trying to reference a static image but I cant get it right.

I tried placing this image in my public/imgs path and tried the following code in my vue component but none worked:

<img src="imgs/sample.jpg">
<img :src="require('imgs/sample.jpg')">

I tried placing it at a different location - resources/imgs - but it didn't work as well:

<img src="../imgs/sample.jpg">
<img :src="require('../imgs/sample.jpg')">

What is the proper way of referencing this static image?

<img src="/imgs/sample.jpg"> ?? (If they are located in your /public/imgs/ folder) — user8034901
– user8034901, Commented Apr 19, 2020 at 13:04

John Paul Lopez · Accepted Answer · 2020-04-19 13:13:21Z

2

The code i have posted above is actually the right way to reference images inside vue components

<img src="imgs/sample.jpg">

What I have gotten wrong was the name of the folder which included a whitespace. Instead of just "imgs", the folder name was "imgs "

answered Apr 19, 2020 at 13:13

John Paul Lopez

708 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

SC Kim · Accepted Answer · 2020-04-19 13:18:22Z

0

If is static image reference, You can refer images directly using '@'

Example:

<img src="@/assets/images/home.png"/>

answered Apr 19, 2020 at 13:18

SC Kim

6004 silver badges14 bronze badges

Collectives™ on Stack Overflow

Proper way to reference images inside a vue component in laravel

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related