DEV Community

Chloe
Chloe

Posted on

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
Enter fullscreen mode Exit fullscreen mode

I'm trying to add like this:

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

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?

Top comments (3)

Collapse
 
varit05 profile image
Varit Patel

Can you check the below code sandbox once?

codesandbox.io/s/prop-validator-j5ss7

Collapse
 
cguttweb profile image
Chloe

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

Collapse
 
varit05 profile image
Varit Patel

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

Billboard image

Create up to 10 Postgres Databases on Neon's free plan.

If you're starting a new project, Neon has got your databases covered. No credit cards. No trials. No getting in your way.

Try Neon for Free →

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay