2024-05-31 09:29AM
1.直接使用 <img> 标签：
<img src="https://your-image-url.com/image.jpg" alt="My Image" />
这是最简单直接的方式,可以直接使用图片的 URL 作为 src 属性的值。
2.使用 require 引入本地图片：
import myImage from './path/to/image.jpg';
<img src={myImage} alt="My Image" />
这种方式适用于你的图片是作为模块/资源引入的情况。使用 require 可以让 Webpack 等打包工具正确处理图片文件。
3.使用 import 引入图片：
import { ReactComponent as MyImage } from './path/to/image.svg';
<MyImage />
这种方式适用于 SVG 图片,可以将 SVG 图片作为 React 组件引入使用。
4.使用 image 组件（Ant Design）：
import { Image } from 'antd';
<Image src="https://your-image-url.com/image.jpg" alt="My Image" />
5.使用 background-image 样式：
<div style={{ backgroundImage: 'url(https://your-image-url.com/image.jpg)' }} />
这种方式适用于将图片作为背景使用的情况,通过 CSS 的 background-image 属性设置图片 URL。
登录
请登录后再发表评论。
评论列表:
目前还没有人发表评论