如何在React中引入图片并显示？

在 React 和 TypeScript (TSX) 中显示图片可以通过多种方式实现，具体取决于你的项目设置和图片的来源。以下是几种常见的方法：

方法一：通过 src 属性直接引用本地图片

如果图片位于项目的 public 目录下，可以直接通过 src 属性引用：

import React from 'react';

const MyComponent: React.FC = () => {
  return (
    <div>
      <img src="/path-to-your-image.jpg" alt="Description of the image" />
    </div>
  );
};

export default MyComponent;

方法二：通过 import 引用本地图片

如果图片位于 src 目录下，可以通过 import 引用：

import React from 'react';
import myImage from './path-to-your-image.jpg'; // Adjust the path according to your file structure

const MyComponent: React.FC = () => {
  return (
    <div>
      <img src={myImage} alt="Description of the image" />
    </div>
  );
};

export default MyComponent;

方法三：通过 URL 引用网络图片

如果图片来自网络，可以直接使用图片的 URL：

import React from 'react';

const MyComponent: React.FC = () => {
  return (
    <div>
      <img src="https://example.com/path-to-your-image.jpg" alt="Description of the image" />
    </div>
  );
};

export default MyComponent;

方法四：使用 require 引用本地图片

你也可以使用 require 来引用本地图片，尤其是在一些特殊的构建工具配置中（如老版本的 Webpack）：

import React from 'react';

const MyComponent: React.FC = () => {
  return (
    <div>
      <img src={require('./path-to-your-image.jpg').default} alt="Description of the image" />
    </div>
  );
};

export default MyComponent;

方法五：在 CSS 中设置背景图片

你还可以通过 CSS 设置背景图片：

import React from 'react';
import './MyComponent.css'; // Import the CSS file

const MyComponent: React.FC = () => {
  return (
    <div className="image-container">
      <p>Content over the background image</p>
    </div>
  );
};

export default MyComponent;

然后在 MyComponent.css 文件中：

.image-container {
  background-image: url('./path-to-your-image.jpg');
  width: 100%;
  height: 300px;
  background-size: cover;
  background-position: center;
}

总结

你可以根据图片的来源和项目结构选择合适的方法来在 TSX 中显示图片。以下是一个完整的例子，展示了如何通过 import 引用本地图片：

import React from 'react';
import myImage from './path-to-your-image.jpg'; // Adjust the path according to your file structure

const MyComponent: React.FC = () => {
  return (
    <div>
      <img src={myImage} alt="Description of the image" />
    </div>
  );
};

export default MyComponent;