登录 主页

react 引入图片

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。 

返回>>

登录

请登录后再发表评论。

评论列表:

目前还没有人发表评论