【React】在 React 项目中引入图片

import

javascript 复制代码
import React from 'react';
import myImage from './path/to/image.jpg';

function MyComponent() {
  return <img src={myImage} alt="description" />;
}

require(虽然现在比较少用)

javascript 复制代码
import React from 'react';

function MyComponent() {
  const myImage = require('./path/to/image.jpg');
  return <img src={myImage} alt="description" />;
}

直接使用图片的 URL

(适用于公共资源或外部链接)

javascript 复制代码
import React from 'react';

function MyComponent() {
  return <img src="https://example.com/path/to/image.jpg" alt="description" />;
}

如果要选择哪种方式更好,我个人推荐使用 import 语句。因为这种方式能够更好地集成到现代化的 JavaScript 打包工具(如 Webpack)中,提供诸如代码分割、缓存优化等功能。此外,import 语句更加符合 ES6+ 规范,使代码可读性和可维护性都有所提升。

其他

1)使用 CSS 背景图

css 复制代码
.background-image {
  background: url('./path/to/image.jpg');
}

在 CSS 模块中:可以通过样式绑定背景图片,适用于背景图片或装饰性小图标。

2)使用 CSS-in-JS 库 如果你在使用 styled-components、emotion 等 CSS-in-JS 库,也可以在 JavaScript 中直接定义样式:

javascript 复制代码
复制代码
import styled from 'styled-components';
import myImage from './path/to/image.jpg';

const ImageContainer = styled.div`
  background: url(${myImage}) no-repeat center center;
  width: 100px;
  height: 100px;
`;

3)结合 Webpack 加载器 Webpack 通常会配置文件加载器(如 file-loaderurl-loader),以便在引入图片时进行优化,具体配置可以参考 webpack 文档。

4)动态引入图片 有时我们需要根据某些条件动态引入图片,这种情况下可以使用 import() 动态导入:

javascript 复制代码
import React, { useState, useEffect } from 'react';

function MyComponent() {
  const [image, setImage] = useState(null);

  useEffect(() => {
    import('./path/to/image.jpg').then(img => {
      setImage(img.default);
    });
  }, []);

  if (!image) return <p>Loading...</p>;

  return <img src={image} alt="description" />;
}

5)SVGR 处理 SVG 如果处理的是 SVG 图像,可以将其作为 React 组件导入:

javascript 复制代码
import React from 'react';
import { ReactComponent as MySvg } from './path/to/image.svg';

function MyComponent() {
  return <MySvg />;
}
相关推荐
abigale0324 分钟前
webpack+vite前端构建工具 -11实战中的配置技巧
前端·webpack·node.js
专注API从业者43 分钟前
构建淘宝评论监控系统:API 接口开发与实时数据采集教程
大数据·前端·数据库·oracle
Joker`s smile1 小时前
Chrome安装老版本、不同版本,自制便携版本用于前端调试
前端·chrome
weixin_416639971 小时前
爬虫工程师Chrome开发者工具简单介绍
前端·chrome·爬虫
我是如子啊1 小时前
【解决“此扩展可能损坏”】Edge浏览器(chrome系列通杀))扩展损坏?一招保留数据快速修复
前端·chrome·edge
灵性花火1 小时前
Qt的前端和后端过于耦合(0/7)
开发语言·前端·qt
孤水寒月5 小时前
基于HTML的悬窗可拖动记事本
前端·css·html
祝余呀5 小时前
html初学者第一天
前端·html
耶啵奶膘7 小时前
uniapp+firstUI——上传视频组件fui-upload-video
前端·javascript·uni-app
视频砖家8 小时前
移动端Html5播放器按钮变小的问题解决方法
前端·javascript·viewport功能