How to replace placeholder images with local images in Buefy Carousel?

Question

I have copied the Buefy carousel component from https://buefy.org/documentation/carousel#carousel-list into my Gridsome project. The carousel displays correctly with its supplied placeholder images. These are in an array in the data() segment eg

items: [
                {
                    title: 'Slide 1',
                    image: 'https://picsum.photos/id/0/1230/500'
                },

Now I want my images, not the Buefy placeholder ones. I cannot find the right way to target my local images. I have tried lots of things including

items: [
                {
                    title: 'Slide 1',
                    image: require("@/assets/img/gallery/sheep/sheep2.jpg")
                },

My attempts either break the carousel or display a broken link within it.

did you try with `require("@./assets/img/gallery/sheep/sheep2.jpg")`? Where is the location of the assets directory compared to the directory where the main js is? — Nikola Kirincic, Feb 10 '20 at 15:29
Or without require, just as relative src? `"../assets/img/gallery/sheep/sheep2.jpg"`? — Nikola Kirincic, Feb 10 '20 at 15:36

score 0 · Answer 1 · answered Feb 11 '20 at 09:15

0

Solved. I did a new build (in my case "gridsome develop") after inserting my own image paths. Then this worked fine -

items: [
    {
      title: "Slide 1",
      image: require("@/assets/img/gallery/sheep/sheep1.jpg")
    },

answered Feb 11 '20 at 09:15

nigelwhite

15
7

How to replace placeholder images with local images in Buefy Carousel?

1 Answers1