I’ve set up a carousel using bootstrap-vue. The carousel-items are created dynamically using a for loop and an array. The array contains three objects with the following keys: id, caption, text and image path. So far, when able to display the caption and text but not the images. I checked the console and there was no error. Hence, when very confused. Below are my codes and screenshots of the problem
UPDATE: when trying to fix this problem for 2 days already, help is greatly needed!
This is my project structure
This are my codes
<template>
<div>
<b-carousel
id=”carousel-1”
v-model=”slide”
:interval=”10000”
controls
indicators
background=”#ababab”
style=”text-shadow: 1px 1px 2px #333;”
@sliding-start=”onSlideStart”
@sliding-end=”onSlideEnd”
\>
<b-carousel-slide
v-for=”item in carouselItems”
:key=”item.id”
:caption=”item.caption”
:text=”item.text”
:style=”{ ‘background-image’: ‘url(‘ + item.image + ‘)’ }”
\></b-carousel-slide>
</b-carousel>
</div>
</template>
<script>
export default {
data() {
return {
carouselItems: [
{
id: 1,
caption: “Memories”,
image: “@/assets/images/Homepage-min.jpg”,
text: “Memories(1)”
},
{
id: 2,
caption: “Memories”,
image: “@/assets/images/Homepage-min.jpg”,
text: “Memories(2)”
},
{
id: 3,
caption: “Memories”,
image: “@/assets/images/Homepage-min.jpg”,
text: “Memories(3)”
}
],
slide: 0,
sliding: null
};
},
methods: {
onSlideStart(slide) {
this.sliding = true;
},
onSlideEnd(slide) {
this.sliding = false;
}
}
};
</script>
Here is a screenshot:
Update I went to take a look at the networks tab to see if I specified the wrong image path. However, the image path was correct as the status code is 304. What seems to be the problem? Can anyone help?
Update: I’ve removed the style and replaced it with the following code
:img-src=”item.image”
After I save the changes and refresh, I can see an icon indicating that the browser could not load the images.
Update I’ve successfully rendered the images to the carousel-slide. Apparently, “require” is needed if the image path is relative. I’ve updated this portion of my code to the following
data() {
return {
carouselItems: [
{
id: 1,
caption: “Memories”,
image: require(“@/assets/images/Homepage-min.jpg”),
text: “Memories(1)”
},
{
id: 2,
caption: “Memories”,
image: require(“@/assets/images/Homepage-min.jpg”),
text: “Memories(2)”
},
{
id: 3,
caption: “Memories”,
image: require(“@/assets/images/Homepage-min.jpg”),
text: “Memories(3)”
}
],
slide: 0,
sliding: null
};
},
Update However, now I face another problem, the image does not fit the entire height of the screen when in mobile mode. it to be responsive. Here is a screen shot of my problem
Update 7/5/2019 when still trying to fix this issue, can anyone help me with the CSS?
Solution :
Try using img-src=”https://xxxxx" instead of changing the style. You should get something like that in the code:
<b-carousel-slide
v-for=”item in carouselItems”
:key=”item.id”
:caption=”item.caption”
:text=”item.text”
:img-src=item.image
\></b-carousel-slide>
Or you can just use an actual img tag inside the <b-carousel-slide>:
<b-carousel-slide>
<img
slot=”img”
class=”d-block img-fluid w-100”
width=”1024”
height=”480”
src=”https://xxxxxx"
alt=”image slot”
\>
</b-carousel-slide>
You should also check the pictures ‘path’ since webpack adds a unique-id automatically to each image and can sometimes be troublesome in certain cases, just check that the webpack config is working on the images.