Topic: How can I get images from my assets in mdb-carousel-item working?

David Tee free asked 5 years ago


Expected behavior I want to use images in assets inside a carousel. I've tried:

Actual behavior Image not loaded and the on inspection, the src is carried across.

Using a full url (https://....) works fine

Resources (screenshots, code snippets etc.)


Magdalena Dembna staff commented 5 years ago

Can you provide a code snippet and screenshots of this behavior? Does an error show in the console?


David Tee free commented 5 years ago

Hi Magdalena,

I have an image in /assets/images/test.jpg

I want to use it in for example:

But it does not work. I have tried:

./assets/images/test.jpg @/assets/images/test.jpg

The only path that seems to work is a full url, starting http:// etc

How can I refer to images in my assets folder in and the carousel?

Thanks


Magdalena Dembna staff commented 5 years ago

Please send me a screenshot of your project's tree and code snippet. For some reason the example with code is did not show in your comment.


Jafet Cardenas free commented 5 years ago

Hi, did you get a solution to this problem? i'm having the same issue. code doesn't show when copied here but i'm ommitting tags so it shows : mdb-carousel-item img src="..\assets\img\encabezado.svg" class="img-fluid" alt="First slide" /

when running the project the src gets carried across as is, and so the images don't load.


Magdalena Dembna staff commented 5 years ago

I believe it might be an issue with our webpack configuration. I will look in to this.


Mikołaj Smoleński staff answered 5 years ago


I've just tested the following code and it's working:

<mdb-carousel-item img :src="require('@/assets/logo.png')" mask="black-light" alt="First slide">

Best regards


jay2jam pro answered 5 years ago


Same problem. I also tried :src, but it is not working.

i tried in:

<mdb-carousel-item img src='http://localhost:8080/assets/slider.jpg' mask="black-light" alt="First slide">

src='http://localhost:8080/assets/slider.jpg'
:src='http://localhost:8080/assets/slider.jpg'
src='http://localhost/assets/slider.jpg'
:src='http://localhost/assets/slider.jpg'
src='../assets/slider.jpg'
:src='../assets/slider.jpg'
src='@/assets/slider.jpg'
:src='@/assets/slider.jpg'

nothing is working


Mikołaj Smoleński staff answered 5 years ago


Have you tried uploading images by using the following syntax? :src="require(PATH)"

Best regards



Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Answered

Specification of the issue

  • ForumUser: Free
  • Premium support: No
  • Technology: MDB Vue
  • MDB Version: 5.5.0
  • Device: Laptop
  • Browser: Chrome
  • OS: Windows 10
  • Provided sample code: No
  • Provided link: Yes