如何在 React 应用程序中显示我的图像？ [复制]答案

【问题标题】：How can I display my image in a React app? [duplicate]如何在 React 应用程序中显示我的图像？ [复制]
【发布时间】：2021-03-26 19:40:56
【问题描述】：

我在使用 create-react-app 创建的 React 应用中加载图像时遇到问题。加载图像会返回 304 Not Modified 响应。这是我的代码： App.js：

import logo from './logo.svg';
import { Navbar, NavbarBrand } from 'reactstrap'
import Menu from './components/MenuComponent';
import './App.css';

function App() {
  return (
    <div>
      <Navbar dark color="primary">
        <div className="container">
          <NavbarBrand href="/" >Home</NavbarBrand>

        </div>

      </Navbar>

      <Menu />

      <img src="assets/images/uthappizza.png" alt=""/>

    </div>
  );
}

export default App;

谢谢！

【问题讨论】：

里面只需要输入图片路径
@ShivanshuGupta 我的资产文件夹必须在 src 文件夹中吗？
@Joseph 是的....

标签： javascript reactjs reactstrap

【解决方案1】：

查看https://create-react-app.dev/docs/adding-images-fonts-and-files/，你需要做的：

import React from 'react';
import logo from './logo.svg';
import { Navbar, NavbarBrand } from 'reactstrap'
import Menu from './components/MenuComponent';
import './App.css';
import pizza from './assets/images/uthappizza.png'; // Tell webpack this JS file uses this image

function App() {
  return (
    <div>
      <Navbar dark color="primary">
        <div className="container">
          <NavbarBrand href="/" >Home</NavbarBrand>
        </div>
      </Navbar>
      <Menu />
      <img src={pizza} alt=""/>
    </div>
  );
}

export default App;

您还可以在此处阅读有关WebPack works 的更多信息。

【讨论】：

谢谢。每次需要使用图像时都必须导入图像吗？假设我从一个 api/json 文件接收多个图像路径，如何导入所有路径？
是的，你可以。看到这个问题和答案stackoverflow.com/a/42118921/1418750

【解决方案2】：

这是导入静态资产的正确方式：

import VariableName from "../relative/path/to/image.png";
import image from './assets/images/uthappizza.png';

导入的变量image 包含assets/images/uthappizza.png 相对于应用程序的完整URL。您只需更改为：

import image from './assets/images/uthappizza.png';

<img src={image} alt="Logo" />;

【讨论】：