【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 />;
}
相关推荐
枷锁—sha1 分钟前
【DVWA系列】——CSRF——Medium详细教程
android·服务器·前端·web安全·网络安全·csrf
枷锁—sha3 分钟前
跨站请求伪造漏洞(CSRF)详解
运维·服务器·前端·web安全·网络安全·csrf
群联云防护小杜19 分钟前
深度隐匿源IP:高防+群联AI云防护防绕过实战
运维·服务器·前端·网络·人工智能·网络协议·tcp/ip
汉得数字平台37 分钟前
【鲲苍提效】全面洞察用户体验,助力打造高性能前端应用
前端·前端监控
花海如潮淹43 分钟前
前端性能追踪工具:用户体验的毫秒战争
前端·笔记·ux
_丿丨丨_6 小时前
XSS(跨站脚本攻击)
前端·网络·xss
天天进步20156 小时前
前端安全指南:防御XSS与CSRF攻击
前端·安全·xss
拾光拾趣录8 小时前
括号生成算法
前端·算法
拾光拾趣录9 小时前
requestIdleCallback:让你的网页如丝般顺滑
前端·性能优化
前端 贾公子9 小时前
vue-cli 模式下安装 uni-ui
前端·javascript·windows