首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

尝试在react中导入img

在 React 中导入和使用图像有两种方法:

  1. 通过将图像作为模块导入:

在您的 React 组件中,首先需要导入图像文件,然后将其作为一个变量使用。这样,Webpack 就会知道在构建时需要包含该图像。

代码语言:javascript
复制
import React from 'react';
import myImage from './myImage.jpg'; // 从与组件相同的文件夹中导入图像

const MyComponent = () => {
  return (
    <div>
      <img src={myImage} alt="My Image" />
    </div>
  );
};

export default MyComponent;
  1. 通过public文件夹中的图像:

如果要访问public文件夹中的图像,您需要使用一个特殊的变量 process.env.PUBLIC_URL

代码语言:javascript
复制
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,请使用第二种方法。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

领券