如何在 React 应用程序中显示我的图像？

Question

我在使用 create-react-app 创建的 React 应用程序中加载图像时遇到问题。加载图像 return 304 未修改响应。这是我的代码： 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;

谢谢！

Answer 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 的更多信息。

Answer 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" />;

如何在 React 应用程序中显示我的图像？

How can I display my image in a React app?

javascript

reactjs

reactstrap