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

相关推荐
云中雾丽几秒前
react-checkbox的封装
前端
乐园游梦记2 分钟前
告别Ctrl+F5!解决VUE生产环境缓存更新的终极方案
前端
岁月宁静4 分钟前
用 Node.js 封装豆包语音识别AI模型接口:双向实时流式传输音频和文本
前端·人工智能·node.js
猪猪拆迁队8 分钟前
前端图形架构设计:AI生成设计稿落地实践
前端·后端·ai编程
岁月宁静10 分钟前
Vue 3.5 + WangEditor 打造智能笔记编辑器:语音识别功能深度实现
前端·javascript·vue.js
非凡ghost10 分钟前
BiliLive-tools(B站录播一站式工具) 中文绿色版
前端·javascript·后端
yi碗汤园14 分钟前
【一文了解】八大排序-冒泡排序、选择排序
开发语言·前端·算法·unity·c#·1024程序员节
非凡ghost17 分钟前
bkViewer小巧精悍数码照片浏览器 中文绿色版
前端·javascript·后端
三小河32 分钟前
JS 自定义事件:从 CustomEvent 到 dispatchEvent
前端