I can't understand why this img-src is not working in my vue template. May be it's my simple mistake which I couldn't figure out.
And here is,
<b-card img-src="../assets/image.jpg" img-alt="Image" img-top tag="article" style="max-width: 20rem;">
-
It seems like the problem might be the relative path to your image. This is possibly related to how your assets are being compiled/what build system you are using. Could you add some more details about your environment and how you are running Vue?Hannah– Hannah2020-11-04 13:06:09 +00:00Commented Nov 4, 2020 at 13:06
-
Does this answer your question? How do I include image in BootstrapVue carousel?Hiws– Hiws2020-11-04 13:19:07 +00:00Commented Nov 4, 2020 at 13:19
Add a comment
|
2 Answers
here is one way to import the image to your vue-component:
script
import image from "@/assets/your_img.jpg";
export default {
data() {
return {
image
}
},
template
<b-card :img-src="image">
I think its beacause webpack generates a hash on the image path, eg. "/img/my_image.b1793a36.jpg". I guess thats why your first approach doesn't work. If you import the image, webpack will add a hash automaticlly and the path will reference to it.
Comments
Do you see a broken image icon on your page? -> wrong relative path to the image
If there is no broken image icon try to set a with/height and separate it from the b-card component into a normal img-tag inside the template environment in your component
