How to display an image saved in another project folder in vue?
I am needing to display an image that is saved in another folder of my project within a V-img tag, in vuetify. I just can't do it. Does anyone know how to do?
My project folders are organized like this:
►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.vue?
Is it possible for me to create an array, empty, then add objects in which, within those objects, contains an attribute in that their value is the path to these images, is it possible to display these objects by the value of this attribute?
2 answers
You are inside the components folder, you will soon need to have '../ ' to exit this folder and stay in src , after that you need to enter assets, then we have '../ assets / ' and then we enter in letters and put the name of the image, then we will have the following Path: '../ assets/cards / picture name.png ' . Regarding Vuetify, your V-img will basically be:
<v-img src="../assets/cartas/nomeDaImagem.png" ></v-img>
I believe you can do this way:
<v-img :src="require('@/assets/cartas/asdeouros.png')" />