react里面引入图片

  • Z时代
  • 2024-01-10
  • 分类：综合

react

引入图片确实走了很多的坑，开始的认知里，所有静态页面都需要放在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

以上是 react里面引入图片 的全部内容， 来源链接： utcz.com/z/381845.html

回到顶部