Topic: Vue mdb-card-image relative path not working
Hi,
I am having an issue using an image from a relative path on a card image (mdb-card-image). When I use an image from a relative path for example:
<mdb-card-image src="@/assets/anonymous_testimonial.png" alt="Anonymous user"></mdb-card-image>
The image will never display. It will just display the alt value as it seems the image is not found. However if I use the same relative path on an img src for example:
<img src="@/assets/anonymous_testimonial.png"/>
It will display correctly. I have tried other methods such as:
<mdb-card-image src="../assets/anonymous_testimonial.png" alt="Anonymous user"></mdb-card-image>
But it will still not display. Just wondering if there is a way to use a relative path on a card image?
Thanks.
Hi there @Euan,
Thanks for reaching out! As seen in devTools, the relative, webpack-aliased path is taken literally as the <img src="..."> attribute, which makes little sense as the source. The reason for this is that the props are evaluated on run-time, while webpack aliases (say, @/assets/a.jpg) on compile-time. It means that webpack finishes bundling our assets, including pictures, way ahead of time when the props are being passed in, resulting in them being regular strings and not bundling resource references.
One of the workarounds is to pass a require call so that webpack knows to step in, as in
<mdb-card-image :src="require('@/assets/a.jpg')" alt="Card image cap"/>
Let me know if that helps.
With Best Regards, Kuba
Euan pro commented 6 years ago
Thanks a lot :)
Jakub Strebeyko staff commented 6 years ago
My pleasure! :D Have a good one.
Ahmed El Sayed commented 4 years ago
thanks alot bro
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Resolved
- User: Pro
- Premium support: No
- Technology: MDB Vue
- MDB Version: 5.1.0
- Device: Desktop PC
- Browser: Chrome 72.0.3626.109
- OS: Windows 10
- Provided sample code: No
- Provided link: No