CODEWITHSUNDEEP
htmlreactjsreactstrap
Abdulkabir Ojulari
Abdulkabir Ojulari

Reputation: 1467

How do I solve a problem with image path for carousel

I have an image folder named "images" in public and a fold named component in src. I tried to define the path to the images but none is displaying.

I have tried to reference to the path as illustrated below. 

const items = [
  {
    src: '/public/images/fraction-slider/fraction_6.png',
    altText: 'Slide 1',
    caption: 'Slide 1'
  },
  {
    src: '/public/images/fraction-slider/fraction_2.png',
    altText: 'Slide 2',
    caption: 'Slide 2'
  },
  {
    src: '/public/images/fraction-slider/build.png',
    altText: 'Slide 3',
    caption: 'Slide 3'
  }
];

I expect the images to display

Upvotes: 0

Views: 908

Answers (2)

Abdulkabir Ojulari
Abdulkabir Ojulari

Reputation: 1467

Thanks, sorry for bothering you all. I have later fixed the problem with src: './images

const items = [
  {
    src: './images/fraction-slider/fraction_6.png',
    altText: 'Slide 1',
    caption: 'Slide 1'
  },
  {
    src: './images/fraction-slider/fraction_2.png',
    altText: 'Slide 2',
    caption: 'Slide 2'
  },
  {
    src: './images/fraction-slider/build.png',
    altText: 'Slide 3',
    caption: 'Slide 3'
  }
];

Upvotes: 2

Julian
Julian

Reputation: 1622

/public will be valuable when the react code will be built.

So please try to remove it while developing

Upvotes: 1

Related Questions