如何显示本地图像文件夹中的图像？

Question

我想在 React web 应用程序的 header 中显示一个徽标。 下面给出的代码运行良好，但需要将徽标上传到外部图像存储库：

<img src="https://upload....mylogo.png" alt="logo" className={classes.logo} />

有什么方法可以显示位于 web 应用程序项目的/images文件夹中的徽标，而不是指向外部图像？

import React from 'react'
import { makeStyles } from '@material-ui/core/styles';

const useStyles = makeStyles({
  logo: {
    width: '20%',
    maxWidth: 100,
    float: 'left',
    position: 'relative',
    margin: '10px 15px 15px 10px'
  },
  author: {
    width: '20%',
    maxWidth: 100,
    float: 'right',
    position: 'relative',
    margin: '10px 15px 15px 10px',
    color: '#FFFFFF',
    textDecoration: 'none'
  }
});

export function Header() {
    const classes = useStyles();
    
    return (
        <div>
          <img src="https://upload....mylogo.png" alt="logo" className={classes.logo} />
          <h1>My header</h1>
        </div>
    )
}

Answer 1

从/images导入徽标

import logo from 'images/logo.png'

/*use it*/

<img src={logo} alt="" className="" />

Answer 2

使用../到 go 回到上层目录和./为当前目录。

如果您的图像目录是src/image/logo.png和src/components/Headers的反应文件。 使用以下代码：

<img src={"../image/logo.png"} alt="" className="" />

Answer 3

是的，您可以将图像从文件资源管理器拖放到浏览器中，然后复制并粘贴 url。 它应该看起来像 file:///C:/myimages/image.jpg

这种方法的问题是您无法部署或共享您的项目，因为您的用户需要在其本地计算机上的正确路径中拥有此图像。

如果您使用 create-react-app 创建您的 react 应用程序，则可以将其放在 public 文件夹中，然后在图像中添加以下属性： <img src="/image.jpg" /> 。

这种格式称为“相对 URL”。 当您运行“npm start”时，Webpack 服务于公用文件夹，当浏览器看到“/image.jpg”时，它将 go 到服务文件夹的根目录（在我们的例子中是 public）并搜索“image.jpg”。