一、React中引用本地图片的常见方法
1. 使用import
语句引入图片
这是最推荐的方式,因为它符合ES6模块化的规范,代码可读性和维护性都较高。
import React from 'react';
import logo from './images/logo.png';
function App() {
return <img src={logo} alt="Logo" />;
}
2. 使用require
语句引入图片
function App() {
const logo = require('./images/logo.png');
return <img src={logo} alt="Logo" />;
}
3. 使用require.context
批量引入图片
const imageContext = require.context('./images', false, /\.(png|jpe?g|svg)$/);
const images = imageContext.keys().map(imageContext);
function App() {
return (
<div>
{images.map((image, index) => (
<img key={index} src={image} alt={`Image ${index}`} />
))}
</div>
);
}
二、背景图片的引用方法
1. 在CSS文件中直接引用
.logo {
background: url('./images/logo.png') no-repeat center center;
background-size: contain;
}
2. 在组件中使用style
属性动态引用
const logoUrl = require('./images/logo.png');
function App() {
const divStyle = {
color: 'red',
backgroundImage: `url(${logoUrl})`,
backgroundRepeat: 'no-repeat',
backgroundSize: 'contain'
};
return <div style={divStyle}>Hello World!</div>;
}
三、最佳实践与技巧
1. 图片资源的优化
2. 使用图片懒加载
import React, { useState, useEffect } from 'react';
function LazyImage({ src }) {
const [imageSrc, setImageSrc] = useState('');
useEffect(() => {
const img = new Image();
img.onload = () => setImageSrc(src);
img.src = src;
}, [src]);
return <img src={imageSrc} alt="Lazy Load" />;
}