React中引入使用本地图片

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">，因为打包后，项目结构会变化。

原文地址：https://blog.csdn.net/qq_39460057/article/details/140640455

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！