react url-loader 路径问题

黛玉戴玉逮鱼

于 2023-03-09 17:22:23 发布

阅读量267

点赞数

分类专栏： React CSS 文章标签： react.js scss

本文链接：https://blog.csdn.net/weixin_44730335/article/details/128301633

版权

React 同时被 2 个专栏收录

19 篇文章

订阅专栏

CSS

4 篇文章

订阅专栏

文章讲述了在index.scss文件中设置背景图片时遇到的问题，即背景图片路径显示为[objectModule]。作者通过检查和修改webpack.config.js中的url-loader配置，将esModule设置为false，并调整图片引用路径，最终成功解决了问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

关键代码：在index.scss中设置样式，imgs中是图片

background: url('../../../public/imgs/arousel_one.jpg') no-repeat;

目录结构：

打开元素看到下面这样的提示：

background: url([object Module]); // 属性值无效

排除错误的过程：

1. 添加height

2. 在webpack.config.js中配置url-loader，添加 esModule: false, ：

        // url-loader
        {
          test: /\.(jpg|png|svg|gif|jpeg)$/,
          use: [
            {
              loader: "url-loader",
              options: {
                limit: 40,
                esModule: false,
                name: "img/[name].[hash:8].[ext]",
              },
            },
          ],
        },

3. 路径错误：

url定位的是当前scss文件的同级目录下的img，因此，尝试使用 / 直接进入根目录，从根目录一级一级往下找图片。

success!