原因
比如,我page要引入一个页面,那么引入起来就很麻烦。
图片在src\assets\img\login\bg.jpg
组件在src\pages\login\index.tsx
引入代码如下:
import React from 'react'; import style from './style.less'; import bg from '../../assets/img/login/bg.jpg'; const Login = () => { return (); } export default Login;![]()
设置短链接
其实这是利用webpack的功能alias。
运行npm run eject暴漏webpack的配置文件config/webpack.config.js
全局搜索alias: { 然后添加,如下配置:
alias: { '@assets':path.join(__dirname,'..','src/assets') ... },
新办法引入图片
import bg from '@assets/img/login/bg.jpg';
或者在css中使用
background-image: url("~@assets/img/login/bg.jpg");
background-image:
url(
"~@assets/img/login/bg.jpg"
);