Question

我正在从.json中提取一些数据，以在正在使用的React应用中传播网格。

{props.title}和{props.author}正确返回，但是我无法显示该图像。目前，我在转到此路线时进入“错误：找不到模块'./'”页面。

我确信它是我的/ assets / images文件路径，但无法解决。

这是我的文件路径：

```
src
 ┣ assets
 ┃ ┗ images
 ┃ ┃ ┣ burger-logger.png
 ┃ ┃ ┗ green_cup.png
 ┣ components
 ┃ ┣ About
 ┃ ┃ ┣ About.js
 ┃ ┃ ┣ Hello.js
 ┃ ┃ ┗ index.scss
 ┃ ┣ PortfolioGrid
 ┃ ┃ ┣ PortfolioGrid.js
 ┃ ┃ ┗ tileData.js
 ┃ ┣ Header.js
 ┃ ┗ Hero.js
 ┣ pages
 ┃ ┣ Home
 ┃ ┃ ┣ index.js
 ┃ ┃ ┗ style.css
 ┃ ┗ Portfolio
 ┃ ┃ ┗ index.js
 ┣ App.js
 ┣ index.css
 ┣ index.js
 ┗ projects.json
```

这是网格组件-

```
import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import GridList from '@material-ui/core/GridList';
import GridListTile from '@material-ui/core/GridListTile';
import GridListTileBar from '@material-ui/core/GridListTileBar';
import ListSubheader from '@material-ui/core/ListSubheader';
import IconButton from '@material-ui/core/IconButton';
import InfoIcon from '@material-ui/icons/Info';
import Projects from '../../projects.json';
import '../../assets/images/burger-logger.png';

const useStyles = makeStyles((theme) => ({...

/**
 
export default function PortfolioGrid(props) {
  const classes = useStyles();

  return (
    <div className={classes.root}>
      <GridList cellHeight={180} className={classes.gridList}>
        <GridListTile key="Subheader" cols={2} style={{ height: 'auto' }}>
          <ListSubheader component="div"></ListSubheader>
        </GridListTile>
        {Projects.map((props) => (
          <GridListTile key={props.image}>
            <img src={require(`../../assets/images/${props.image}`)} alt={props.title} />
            <GridListTileBar
              title={props.title}
              subtitle={<span>by: {props.author}</span>}
              actionIcon={
                <IconButton aria-label={`info about ${props.title}`} className={props.icon}>
                  <InfoIcon />
                </IconButton>
              }
            />
          </GridListTile>
        ))}
      </GridList>
    </div>
  );
}
```

这是.json结构-

```
[
  {
    "id": 1,
    "title": "Burger-Logger",
    "image": "burger-logger.png",
    "author": "Me"
  },
  {
    "id": 2,
    "title": "test",
    "image": "",
    "author": "Me"
  }
]
```

很抱歉，没有文字。任何方向都非常感谢。

Answer 1

尝试一下

<img src={require(`../assets/images/${props.image}.png`)}/>

错误：在React中导入图像时找不到模块“ ./”？

1 个答案: