Array's of images

Hello people,

Well, my problem is about images. imagine the problem, that in my div parent, only have tags img children or 1 or more than 1. And i put that img src’s on a array like:

– slider.json –

[
     './img/header.jpg',
     './img/header1.jpg'
]

---

And this is my React component:

import React, { Component } from 'react';
import * as data from "../resources/slider.json";

class FullWidthHeader extends Component{
    render(){
        return(
           <Image />
        );
    }
}

class Image extends FullWidthHeader{

    createImage(props){
        return(<img src={props} alt="imgwow" />);
    }

    createImages(images){
        return images.map(this.createImage);
    }

    render(){
        return(
            <div>
                { this.createImages(data) }
            </div>
        );
    }
}

export default FullWidthHeader;

My problem i think, its for webpack seeing the img src, i cant see the image… How i can resolve this?

Kind Regards,

Pedro Cruz

[Timer]

webpack isn’t able to analyze this, but the fix should be relatively simple.

Change slider.json to slider.js, and replace entries like so:

export default [
  require('./img/header.jpg'),
  require('./img/header1.jpg')
]

Change

import * as data from "../resources/slider.json";

to

import data from '../resources/slider';

[Timer]

It cannot be done with json unless if you use the public folder. Sorry!

I’ll close this as resolved, since you said the js solution works (and https://github.com/facebookincubator/create-react-app/issues/2545#issuecomment-309015448 for json).