Referencing relative images in Vue

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

[Varit Patel]

Can you check the below code sandbox once?

codesandbox.io/s/prop-validator-j5ss7

[Chloe]

I don't understand why do I need validation all I want is to add a link to a relative image...?

[Varit Patel]

I gave it to you to refer how assets are getting loaded. You can ignore other parts. Can't you?