首页
学习
活动
专区
工具
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,请使用第二种方法。

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

相关·内容

1分53秒

在Python 3.2中使用OAuth导入失败的问题与解决方案

7分15秒

08-尚硅谷-在Eclipse中使用Maven-导入Maven工程

4分16秒

12-尚硅谷-在Idea中使用Maven-导入Maven工程

5分43秒

071_自定义模块_引入模块_import_diy

119
1分29秒

U盘根目录乱码怎么办?U盘根目录乱码的解决方法

4分57秒

073_下划线的总结_内部变量_私有变量_系统变量

4分17秒

057如何删除print函数_dunder_builtins_系统内建模块

373
38秒

Lightroom Classic教程:如何在Mac Lightroom 中创建黑色电影效果

1分26秒

PS小白教程:如何在Photoshop中完美合并两张图片?

55秒

PS小白教程:如何在Photoshop中制作浮在水面上的文字效果?

9分12秒

运维实践-在ESXI中使用虚拟机进行Ubuntu22.04-LTS发行版操作系统与密码忘记重置

1分10秒

PS小白教程:如何在Photoshop中制作透明玻璃效果?

领券