Topic: Vue mdb-card-image relative path not working

Euan pro asked 5 years ago


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?


Jakub Strebeyko staff answered 5 years ago

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 5 years ago

Thanks a lot :)

Jakub Strebeyko staff commented 5 years ago

My pleasure! :D Have a good one.

Ahmed El Sayed free commented 3 years ago

thanks alot bro

Please insert min. 20 characters.


Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.



Specification of the issue

  • ForumUser: 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