How do I get images to work in Vuetify?

Question

Specifically, I am building an app using Vuetify. I attempted to add an image to a card via v-card-media and using src. Checking the console, I can see that the .jpg I am using is listed, but the image does not show up. I admit I am new to Vue.js and JS so it may be some inexperience on my part, but I am quite lost and perplexed on this.

I am under the impression that with JS alone, there are some extra steps I must take to have an image be properly "read". Am I correct in my assumption that Vuetify removes those extra steps? That is to say, can I post and this will give the desired result without me having to create an additional function or am I horribly wrong? Any help is appreciated.

Solution 1

Inexperience strikes but tenacity saves the day. The issue I was having was that I was using:

<img src="src/assets/apple.jpg" alt="">

And instead I should have been using:

<img src="@/assets/apple.jpg" alt="">

Taking note of the "@" instead of src. I had searched many places but looked at the original demo site and saw the variation which is probably what I should have done from the start. C'est la vie.

Solution 2

Try this is for vuetify

 <v-img src="@/assets/logo.png"></v-img>

Comments

[vahdet]

Welcome! Maybe you can add some bits of information from the developer console of the browser you use (Maybe better after adding an add-on for vue developer tools). I personally cannot make a picture of yur case in my mind with this piece of information.