react 项目搭建后 打包 引入图片的问题

我的 webpack 版本是5.70.0 的 如下

"webpack":"^5.70.0",

"webpack-cli":"^4.9.2",

项目运行的时候 在jsx 中引入图片就用require  图片显示正常 打包后显示正常 如下图 引入方式


如果是 通过CSS 样式引入的图片的话  需要修改 webpack的配置

CSS 样式引入图片除了可以去网上 把图片转成base64 后 直接使用 是没有问题的。但是如果直接 

background-image:url("assets/common/login_bg_new.png"); 这样呢引入  无论是项目 npm run dev 打开还是 npm run build 图片都无法正常显示。

修改webpack 配置 如图


即可。

项目 npm run build 后 图片 放置到一个文件夹下 需要继续修改 webpack 配置 如图


这样 打包后 项目运行正常 打包正常  打包生成的dist 文件夹规整。

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容