reactjs - 错误:在 React 中导入图像时找不到模块“./”?
问题描述
我正在从 .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"
}
]
```
对不起,文字墙。任何方向都非常感谢。
解决方案
尝试这个
<img src={require(`../assets/images/${props.image}.png`)}/>
推荐阅读
- javascript - ECMAScript 模板文字返回不同的结果
- sql - 按查询中所需的帮助分组
- python - 在多处理 python 中无法访问全局变量
- ms-access - 通过更改组合框访问 vba 移动到记录
- postgresql - 如何处理 postgresql 中的递归聚合
- apache-storm - 杀死风暴拓扑后的资源清理
- list - 如何删除所有事件?
- erlang - 是否可以将 erlang 的 :math 函数重新创建为 elixir 宏?
- google-apps-script - makeCopy() 函数从用户驱动器返回复制文件的 URL 和标题
- android - Google Ads 突然从所有生产中的应用程序中消失