1、css样式中,可以写成如下:
.login {
// 映射路径
background: url('@images/img-login.png');
background-size: 100% 100%;
}
.box{
// 相对路径
background: url('../assets/images/box.png');
background-size: 100% 100%;
}
2、在jsx文件中
import LoginLogo1 from '@images/icon-login.png';
import LoginLogo2 from '../assets/images/icon-login.png';
const Login = () => {
return (
<div className="login-box">
<img src={LoginLogo1} alt="" />
<img src={LoginLogo2} alt="" />
</div>
);
};
export default Login;
3、如果使用require,使用webpack构建的项目中用法如下:
<div className="form-title">
<img src={require('../../assets/images/logo.png')} alt="" />
</div>
4、如果使用require,使用vite构建的项目中用法如下:
先安装插件:vite-plugin-require-transform
npm i vite-plugin-require-transform --save-dev
在vite.config.js中配置
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react-swc'
import requireTransform from "vite-plugin-require-transform"; // 引入
export default defineConfig({
plugins: [
react(),
// 配置
requireTransform({
fileRegex: /.js$|.jsx$/,
})
]
})
在jsx文件中使用
<div className="form-title">
<img src={require('../../assets/images/logo.png')} alt="" />
</div>
5、在JSX文件中,想导入图片,不能直接写成:<img src="./logo.png">
,因为打包后,项目结构会变化。