在 React js 中显示图像

在 React 中显示图像需要使用 img 标签。React中，我们使用 JSX 而非 HTML，所以我们要使用类似 HTML 的形式来定义 img 标签。

使用 require

可以使用 require 语句来取得图片的路径，然后把路径传递给 src 属性。以下是使用 require 的示例代码：

import React from 'react';
import myImage from './my-image.jpg'; // 路径根据实际情况修改

function App() {
  return (
    <div>
      <img src={require('./my-image.jpg')} alt="my image" />
    </div>
  );
}

export default App;

注意：在React 17版本之后，使用require加载图片是不再推荐的。所以需要使用import语法来加载图片。

使用 import

使用 import 语句可以更方便地加载图片，特别是在已有约定的情况下。以下是使用 import 的示例代码：

import React from 'react';
import myImage from './my-image.jpg'; // 路径根据实际情况修改

function App() {
  return (
    <div>
      <img src={myImage} alt="my image" />
    </div>
  );
}

export default App;

使用 URL

当然也可以把图片 URL 直接传递给 src 属性：

import React from 'react';

function App() {
  return (
    <div>
      <img src="https://www.example.com/images/my-image.jpg" alt="my image" />
    </div>
  );
}

export default App;

有些情况下，我们可以把图片 URL 存储在环境变量中，然后在代码中引用。

结语

通过上述方法，我们可以在 React 中轻松地实现图像的显示。注意事项包括根据实际情况修改路径、文件名和文件格式等。