Javascript 如何将JSON数据中的图像导入CreateReact应用程序

因此，我有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>
    )
}

类卡扩展组件{
render（）{
const{name，description，image}=this.props；
const items=Object.values（this.props.techs）；
console.log（this.props）
返回(
{name}
{items.map（技术=>
技术人员
).join（“/”）}
{说明}
访问网站
)
}

但是createreact应用程序抛出错误“error:找不到模块“../public/images/test.jpg”

---

有什么提示吗？

我们不能动态使用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")
    }
]

---

试试这个，它对我有用

首先将文件/格式名称改为

.js

，而不是

.json

，然后像这样编辑代码

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”导入React；
从“./public/images/test.jpg”导入TestIMG1；
从“./public/images/test.jpg”导入TestIMG2；
导出常量数据=[
{
重点:1,，
名称：“进球队”，
techs:[“React&Redux”、“Express”、“MySQL”]，
描述：“Lorem ipsum dolor sit amet，职业精英，工作时间和工作时间”，
图片：TestIMG1
},
{
重点:二,，
名称：“WesterosCraft”，
techs:[“React&Redux”、“Express”、“MySQL”]，
描述：“Lorem ipsum dolor sit amet，职业精英，工作时间和工作时间”，
图片：TestIMG2
}，

将文件另存为。jsreact不允许在src之外使用图像，应为require（'src'））