Create-react-app: Array's of images

[pedropcruz]

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

[themre]

put static images in your public/images/ folder and then reference them in React code as <img src={'static/images' + json[i]} />.
if you want WP to manage images, you will need to define them in your react component (import img1 from './img1.jpg'.

[pedropcruz]

Hello @themre

that doesn't resolve my problem, i'm not putting my files (and i dont needed) put on public folder. I can do all my changes on src, and webpack can put them on public folder. So i think that is not a good solution.

But i had tried, and when the page had render, the img is not on my src/img directory. And can't understand why...

if you need, i can put printscreen of that.

Many Thanks

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';

[bondz]

Your Image component should also extend React.Component and pass the data as props to the Image component instead.

[pedropcruz]

Hello @Timer and @bondz

Well, i know that's a good solution, but if my app needs json, this bundle can't resolve this? :| i think that is a possible request .

EDIT:

btw, that solution, the result is this:

./src/resources/slider_images.js

Module not found: Can't resolve './src/img/header.jpg' in '/Users/pedropcruz/Documentos/PROJETOS/ekilibrium_website/src/resources'

and @bondz it's exactly the same. When page rendered's the result is the same.

EDIT2:

Sorry wrong path. is not on ./src/img/header.jpg , but yes on ../img/header.jpg :)

But in any case, i prefer with json. If can anyone resolve that i aprecciate that!

[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).

[pedropcruz]

lol, it's not suposse to use public folder... So, what's the reason to use webpack?

[ArmorDarks]

If you this desperately want to keep json, just do this:

import * as data from '../resources/slider.json'

/* This should properly require images with WebPack */
data.forEach((imagePath) => require(imagePath))

/* ... rest of your code */

This is quite crude example, adjust it to your needs, but I hope you've catched the idea.

[pedropcruz]

thanks for that @ArmorDarks , but cant require the imagePath, can't understand what's the problem... require module not found.

[thezealousfool]

Hello @Timer and @ArmorDarks ,

I want webpack to manage my images as I want the service worker to cache them.
I have a component Card which will take the name of the image file as a prop and render it inside it. How do I import a file based on props and how to use it as a background-image for a div (I want to have background-size: cover)?

Thank You