How to view an image saved in another project folder in Vue?

Asked

Viewed 835 times

0

I need to display an image that is saved in another folder of my project inside a v-img tag, in vuetify. I’m just not getting it. Someone knows how to do?

My project folders are so organized:

►node_modules
►public
▼src
   ▼components
      ░GameCardField.vue
   ▼assets
      ▼cartas
         ░asdeouros.png
         ░doisdeouros.png
         ░tresdeouros.png
         ░quatrodeouros.png

How to import these images and display them in a v-img tag within the Gamecardfield file.See?

It is possible to create an empty array, then add objects in which, within these objects, contains an attribute in which their value is the path to these images, it is possible to display these objects by the value of this attribute?

image vue.js vuetify

2 answers

0


you are inside the folder Components, soon you will need to have '../' to get out of that folder and stay in src, after that it is necessary to enter Assets, then we have '../Assets/' and then we went into cards and put the name of the image, then we will have the following way: '../Assets/cards/nameImage.png'. Regarding Vuetify, your v-img will basically be: 

 <v-img src="../assets/cartas/nomeDaImagem.png" ></v-img>

0

I believe you can do it this way:

<v-img :src="require('@/assets/cartas/asdeouros.png')" />

Browser other questions tagged image vue.js vuetify

You are not signed in. Login or sign up in order to post.