如何将图像从 JSON 数据导入 create-react-app答案

【问题标题】：How to import images from JSON data into create-react-app如何将图像从 JSON 数据导入 create-react-app
【发布时间】：2019-01-03 14:18:38
【问题描述】：

所以我有 JSON 数据，其中包含位于我的公共文件夹 (/public/images) 中的图像的路径。像这样，

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"
},

根据阅读其他一些类似情况，这是我在组件中尝试过的；

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>
    )
}

但是 create-react-app 抛出错误“错误：找不到模块'../public/images/test.jpg'

有什么提示吗？

【问题讨论】：

标签： javascript reactjs image create-react-app

【解决方案1】：

我们不能动态使用require。你可以像这样改变你的数据。

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")
    }
]

【讨论】：

react 不允许 src 之外的图片，应该是 require('src')

【解决方案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"
    }
]

【讨论】：

将文件另存为 .js

【解决方案3】：

试试这个，它对我有用，

首先将文件/格式名称更改为.js 而不是.json，然后像这样编辑代码。

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
},

然后将其导入到这样的组件中：

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

【讨论】：