引入图片确实走了很多的坑，开始的认知里，所有静态页面都需要放在public里面能执行，代码是这样的

css

.back{
       background-image: url('/images/homeBackImg.png');}

图标路径

my-app├── README.md├── node_modules├── package.json├── .gitignore├── public│   └── images│         └── homeBackImg.png│   └── favicon.ico│   └── index.html│   └── manifest.json└── src    └── App.css    └── App.js    └── App.test.js    └── index.css    └── index.js    └── logo.svg    └── registerServiceWorker.js

 

自己本地开发也可以，服务里面也可以用，爽歪歪

 

但是

 

发布到自己服务器的时候，img找不到了，404，打开浏览器访问地址是这样的

http://xxx.com/images/homeBack.png

但是打包好的image是在build里面，这样就可以访问

http://xxx.com/build/images/homeBack.png

但是要怎么才能在build的时候，自动让业务里面的路径变成url('./iamges.homeBack.png')呢，而且package.json里面已经设置了

"homepage": "."，但只会改变首页的路径，业务里面并不会去改，所以访问不到

 

 

后面可以通过这个方式去，把image放在src里面，业务里面用相对路径，在build的时候，会自动编译成绝对路径访问

css

.back{
        background-image: url('../../images/homeBackImg.png');}

图片路径

my-app├── README.md├── node_modules/├── package.json├── .gitignore├── public/│   └── favicon.ico│   └── index.html│   └── manifest.json└── src/    └── images/          └── homeBackImg.png    └── common/    └── component/    └── index.css    └── index.js    └── logo.svg    └── registerServiceWorker.js