如何在 React 中引用本地图像？

Question

如何从本地目录加载图像并将其包含在 reactjs img src 标签中？

I have an image called one.jpeg inside the same folder as my component and I tried both <img src="one.jpeg" /> and <img src={"one.jpeg"} /> inside my render function but the图像不显示。另外，我无权访问 webpack config 文件，因为该项目是使用官方 create-react-app 命令行实用程序创建的。

更新：如果我首先使用 --- 导入图像并在 import img from './one.jpeg' img src={img} 中使用它，则此方法有效，但我有很多图像文件要导入，因此，我想以形式使用它们， img src={'image_name.jpeg'} 。

原文由 Zip 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

首先将src包装在 {}

那么如果使用Webpack；而不是： <img src={"./logo.jpeg"} />

您可能需要使用要求：

<img src={require('./logo.jpeg')} />

---

另一种选择是首先导入图像：

import logo from './logo.jpeg'; // with import

或者 …

const logo = require('./logo.jpeg); // with require

然后插上…

<img src={logo} />

我会推荐这个选项，尤其是在您重用图像源的情况下。

原文由 WillKre 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

最好的办法是先导入镜像再使用。

 import React, { Component } from 'react';
import logo from '../logo.svg';
export default class Header extends Component {
  render() {
    return (
      <div className="row">
        <div className="logo">
          <img src={logo} width="100" height="50" />
        </div>
      </div>
    );
  }
}

原文由 Arslan shakoor 发布，翻译遵循 CC BY-SA 3.0 许可协议