如何将 JSON 数据中的图像导入 create-react-app

Question

So I have JSON data that includes the path to the images thats located in my public folder (/public/images). Like so,

const data = [
{
    "key": 1,
    "name": "Goal Squad",
    "techs": ["React & Redux", "Express", "MySQL"],
    "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et",
    "image": "../public/images/test.jpg"
},
{
    "key": 2,
    "name": "WesterosCraft",
    "techs": ["React & Redux", "Express", "MySQL"],
    "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et",
    "image": "../public/images/test.jpg"
},

And based on reading a few other similar situations, this is what I've tried in my component;

class Card extends Component  {

render() {
    const { name, description, image } = this.props;
    const items = Object.values(this.props.techs);

    console.log(this.props)

    return (
        <CardWrapper>
            <Row>
                <Column colmd6 colsm12>
                    <Header card>{name}</Header>
                    <TechList>{items.map(tech =>
                        tech
                    ).join(' / ')}</TechList>
                    <Text regular>{description}</Text>
                    <Button>Visit Website</Button>
                </Column>

                <Column colmd6 colsm12>
                    <img src={require(`${image}`)} alt={name}/>
                </Column>
            </Row>
        </CardWrapper>
    )
}

But create-react-app throws the error "Error: Cannot find module '../public/images/test.jpg'

Any hints?

Answer 1

we can not use require dynamically.you can change your data like this.

const data = [
    {
        "key": 1,
        "name": "Goal Squad",
        "techs": ["React & Redux", "Express", "MySQL"],
        "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et",
        "image": require("../public/images/test.jpg")
    },
    {
        "key": 2,
        "name": "WesterosCraft",
        "techs": ["React & Redux", "Express", "MySQL"],
        "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et",
        "image": require("../public/images/test.jpg")
    }
]

Answer 2

module.exports = [
    {
        "key": 1,
        "name": "Goal Squad",
        "techs": ["React & Redux", "Express", "MySQL"],
        "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et",
        "image": "../public/images/test.jpg"
    },
    {
        "key": 2,
        "name": "WesterosCraft",
        "techs": ["React & Redux", "Express", "MySQL"],
        "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et",
        "image": "../public/images/test.jpg"
    }
]

Answer 3

Try this, it worked for me,

First change the file/format name to .js instead of .json and edit the code like this.

 import React from 'react'; import TestIMG1 from "../public/images/test.jpg"; import TestIMG2 from "../public/images/test.jpg"; export const data = [ { key: 1, name: "Goal Squad", techs: ["React & Redux", "Express", "MySQL"], description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et", image: TestIMG1 }, { key: 2, name: "WesterosCraft", techs: ["React & Redux", "Express", "MySQL"], description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et", image: TestIMG2 },

then import it into a component like this:

 {data.map((item) => { return( <div> <img src={item.image} width="" height="" alt=""/> </div> ) })}