Topic: How can I get images from my assets in mdb-carousel-item working?
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.)
Have you tried uploading images by using the following syntax? :src="require(PATH)"
Best regards
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
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
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: 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
Magdalena Dembna staff premium commented 6 years ago
Can you provide a code snippet and screenshots of this behavior? Does an error show in the console?
David Tee commented 6 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 premium commented 6 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 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 premium commented 5 years ago
I believe it might be an issue with our webpack configuration. I will look in to this.