how to store image url in array format

Question

I have a set of images in a folder and now I want to store those images as an array format as shown below

    const slideImages = [
    '/assets/boatImage.jpg',
    '/assets/old.jpg',
    '/assets/vacations.jpg'
  ];

I cannot access those images though the path is correct. The folder structure is shown

I have tried the below code to access the path also but still not working

    const slideImages = [
    './assets/boatImage.jpg',
    './assets/old.jpg',
    './assets/vacations.jpg'
  ];

This is the react code

    import React from 'react';
    import { Slide } from 'react-slideshow-image';
    import './style.css';

const slideImages = [
    './assets/boatImage.jpg',
    './assets/old.jpg',
    './assets/vacations.jpg'
  ];

  const properties = {
    duration: 5000,
    transitionDuration: 500,
    infinite: true,
    indicators: true,
    arrows: true,
    onChange: (oldIndex, newIndex) => {
      console.log(`slide transition from ${oldIndex} to ${newIndex}`);
    }
  }

export const  Home = () => (
            <div className="slide-container">
                <Slide {...properties}>
                    <div className="each-slide">
                        <div style={{'backgroundImage': `url(${slideImages[0]})`}}>
                        <span>Slide 1</span>
                        </div>
                    </div>
                    <div className="each-slide">
                        <div style={{'backgroundImage': `url(${slideImages[1]})`}}>
                        <span>Slide 2</span>
                        </div>
                    </div>
                    <div className="each-slide">
                        <div style={{'backgroundImage': `url(${slideImages[2]})`}}>
                        <span>Slide 3</span>
                        </div>
                    </div>
                 </Slide>
            </div>
    );

How to solve this

Drew Reese · Accepted Answer · 2020-01-28 08:06:12Z

1

Import then use

import image1 from './assets/boatImage.jpg';
import image2 from './assets/old.jpg';
import image3 from './assets/vacations.jpg';

...

const slideImages = [image1, image2, image3];

Or create an index.js file in your assets directory that does the import/export

index.js

import image1 from './assets/boatImage.jpg';
import image2 from './assets/old.jpg';
import image3 from './assets/vacations.jpg';

export default {
  image1,
  image2,
  image3,
}

in component

import { image1, image2, image3 } from './assets';

...

const slideImages = [image1, image2, image3];

answered Jan 28, 2020 at 8:06

Drew Reese

207k19 gold badges280 silver badges293 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

how to store image url in array format

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related