无法在反应创建应用程序项目中显示照片答案

【问题标题】：Unable to display photo in react create app project无法在反应创建应用程序项目中显示照片
【发布时间】：2021-12-17 20:13:30
【问题描述】：

我无法查看我使用 create react app 创建的项目中的照片。请帮帮我..

<img id="2" src={require('../../../img/logo.png')} className="img-fluid" alt="logo"/>

文件路径绝对正确。

package.json:

{
  "name": "e-ticaret-react-ui",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.15.0",
    "@testing-library/react": "^11.2.7",
    "@testing-library/user-event": "^12.8.3",
    "axios": "^0.24.0",
    "bootstrap": "^5.1.3",
    "jquery": "^3.6.0",
    "react": "^17.0.2",
    "react-bootstrap-icons": "^1.6.1",
    "react-dom": "^17.0.2",
    "react-redux": "^7.2.6",
    "react-router-dom": "^5.3.0",
    "react-scripts": "4.0.3",
    "redux": "^4.1.2",
    "web-vitals": "^1.1.2"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

在 Visual Studio 创建的 React 项目中显示了一张照片。我使用在 vs 代码中创建反应应用程序创建的项目中不显示照片。文件结构完全相同。文件夹路径正确。

【问题讨论】：

试试require('../../../img/logo.png').default
在公共文件夹中添加您的图像（或在公共文件夹中创建一个图像文件夹并将您的图像添加到其中）。在你的标签中使用 <img src="/images/your_img.png" />
@kiranvj 谢谢。有效。那么为什么我们需要写“default”呢？
这能回答你的问题吗？ How to import image (.svg, .png ) in a React Component
@maria this 将提供一些见解

标签： reactjs jsx require

【解决方案1】：

试试这个：

在您的imports 文件的顶部使用此行：

import Logo from '../../../img/logo.png';

然后您的img 将如下所示：

<img id="2" src={ Logo } className="img-fluid" alt="logo"/>

【讨论】：

由于我用require方法调用了所有照片，因此需要相应的解决方案。但是在 require 末尾添加“.default”可以修复它。无论如何感谢您的解决方案

【解决方案2】：

创建一个文件夹调用assets 然后把他们的图片放到里面，像这样：

import Logo from '../../assets/logos/logo.png';

<img id="2" src={ Logo } className="img-fluid" alt="logo"/>

【讨论】：