I have been working on setting up a carousel using bootstrap-vue. It is being generated dynamically through an array containing three objects with keys such as id, caption, text, and image path. The issue I am facing now is that while the caption and text are displaying correctly, the images are not showing up. Despite checking the console for errors and finding none, I am puzzled by this situation. Below you can find my code snippets along with screenshots of the problem.
UPDATE: I have been struggling with this problem for two days now, and any assistance would be greatly appreciated!
Here is the structure of my project
https://i.stack.imgur.com/CHasv.png
This is the code I am using
<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: https://i.stack.imgur.com/C3bao.png
Update To investigate further, I checked the networks tab to verify if the image paths were correct. Surprisingly, the status code was 304 which implies that they are indeed correct. Can anyone suggest what might be causing this issue?
https://i.stack.imgur.com/WV2oo.png
Update: After removing the style attribute and replacing it with the following code
:img-src="item.image"
After saving the changes and refreshing the page, I noticed an icon indicating that the browser failed to load the images.
https://i.stack.imgur.com/PjAxQ.png
Update Success! I managed to display the images on the carousel-slide successfully. It turns out that using "require" is necessary when dealing with relative image paths. I have updated this section of my code as shown below
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, a new challenge emerged - the images do not fit the entire height of the screen in mobile mode. I aim for them to be responsive. Here's a snapshot of my dilemma
Update 7/5/2019 I am still grappling with this issue, so if anyone could provide CSS guidance, I would greatly appreciate it.