Referencing relative images in Vue

Publish Date: May 3 '20

2 3

I'm building an app with Vue I have a number of images saved my assets folder which I want to reference in a json file and then filter through them however my images fail to load.

Folder structure:

- src
  - assets containing my images
- components
  - mycomponent - 
- views
- coffees.js - an array of objects where I'm attempting to add images

I'm trying to add like this:

  {
    name: "black coffee",
    description: "coffee without milk",
    photo: "@/assets/coffee.png"
  }'

and then output that image as above in my component.

Should it be ../src/assets/coffee.png although it didn't see to like that either. Am I just referencing them incorrectly?

Comments 3 total

Varit PatelMay 4, 2020
Can you check the below code sandbox once?

codesandbox.io/s/prop-validator-j5ss7
- ChloeMay 4, 2020
  I don't understand why do I need validation all I want is to add a link to a relative image...?
  - Varit PatelMay 4, 2020
    I gave it to you to refer how assets are getting loaded. You can ignore other parts. Can't you?

Add comment

Chloe @cguttweb

Referencing relative images in Vue

Comments 3 total