在 React 中导入和使用图像有两种方法:
在您的 React 组件中,首先需要导入图像文件,然后将其作为一个变量使用。这样,Webpack 就会知道在构建时需要包含该图像。
import React from 'react';
import myImage from './myImage.jpg'; // 从与组件相同的文件夹中导入图像
const MyComponent = () => {
return (
<div>
<img src={myImage} alt="My Image" />
</div>
);
};
export default MyComponent;
public
文件夹中的图像:如果要访问public
文件夹中的图像,您需要使用一个特殊的变量 process.env.PUBLIC_URL
。
import React from 'react';
const MyComponent = () => {
const imageUrl = process.env.PUBLIC_URL + '/myImage.jpg'; // 从 public 文件夹中导入图像
return (
<div>
<img src={imageUrl} alt="My Image" />
</div>
);
};
export default MyComponent;
public
文件夹中的图像不会从 Webpack 进行优化,因此,在某些情况下,第一种方法可能更佳。但是,如果您需要直接访问这些图像或将其用于 CDN,请使用第二种方法。
领取专属 10元无门槛券
手把手带您无忧上云