react in setting short link

The reason
For example, I want to introduce a page page, then introducing them very troublesome.
Pictures in src \ assets \ img \ login \
components in src \ pages \ login \ index.tsx
introduced code is as follows:

import React from 'react';
import style from './style.less';
import bg from '../../assets/img/login/bg.jpg';

const Login = () => {
  return (
    <div className={style.Login}>
      <img src={bg}></img>
    </div>
  );
}

export default Login;

 

Set short link
fact, this is the use of webpack function alias.
Run npm run eject storm drain config / webpack.config.js webpack profile
global search Alias : { then added, as follows:

alias: {
  '@assets':path.join(__dirname,'..','src/assets')
   ...
},

 

The introduction of new approaches pictures

import bg from '@assets/img/login/bg.jpg';

 Or in the css

 background-image: url("~@assets/img/login/bg.jpg");

 

 

 

background-image:  url( "~@assets/img/login/bg.jpg" );