react url-loader 路径问题

最新推荐文章于 2024-05-18 13:49:35 发布

黛玉戴玉逮鱼

最新推荐文章于 2024-05-18 13:49:35 发布

阅读量188

点赞数

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

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

版权

React 同时被 2 个专栏收录

19 篇文章 0 订阅

订阅专栏

CSS

4 篇文章 0 订阅

订阅专栏

关键代码：在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!