图像相对网址在反应 js 中不起作用

【问题标题】：Image relative url not working in react js图像相对网址在反应 js 中不起作用
【发布时间】：2019-07-29 12:51:15
【问题描述】：

我必须在我的项目中显示一个图像，所以我在 src 属性中给出了一个相对路径，但它不起作用。

任何人都建议我一个解决方案。

谢谢

【问题讨论】：

标签： reactjs

【解决方案1】：

您可以将图片作为组件导入并直接使用：

import { ReactComponent as Logo } from "../../assets/logo.png";

和

<Logo className={classes.logo} />

【讨论】：

当我使用上面的代码时，它给我模块解析失败：意外字符'�'错误。
你在使用create-react-app吗？如果没有，请参考这个：stackoverflow.com/questions/45848055/… 使用file-loader 包来帮助你。

【解决方案2】：

您需要使用import 而不是将路径作为字符串传递。

import React from 'react';
import logo from './logo.png';

function Header() {
  return <img src={logo} alt="Logo" />;
}

export default Header;

欲了解更多信息，请访问documentation

【讨论】：