title: React package sass background image, cannot display the image
body: <p>Problem: The sass file uses background-image to set the background image, but the image cannot be displayed in the browser</p>
  <p>Here is my configuration:</p>
  <pre class="lang-js prettyprint-override"><code>{
    test: /\.(svg|png|jpe?g|gif)(\?.*)?$/i,
    use: [{
      loader: 'url-loader',
      options: {
        limit: 1024 * 30,
        fallback: 'file-loader',
        name: utils.assetsPath('imgs/[name].[hash:7].[ext]'),
        exclude: resolve('node_modules'),
        esModule: false
      },
    }]
  }
  </code></pre>
  <p>There is no problem importing images directly from .tsx with the img tag, It's ok</p>
  <pre class="lang-js prettyprint-override"><code>import imag from '@/assets/imgs/image.png'
  &lt;img src={imag} alt=&quot;&quot; /&gt; 
  </code></pre>
  <p><a href="https://i.stack.imgur.com/cyNo9.png" rel="nofollow noreferrer">img1</a></p>
  <p>But use background-image!!</p>
  <pre class="lang-css prettyprint-override"><code> background: url(&quot;@/assets/imgs/image.png&quot;);
  </code></pre>
  <p>or</p>
  <pre><code>background: url(&quot;../../assets/imgs/image.png&quot;)
  </code></pre>
  <p><a href="https://i.stack.imgur.com/G3wwQ.png" rel="nofollow noreferrer">img2</a></p>
  <p><a href="https://i.stack.imgur.com/DnoaP.png" rel="nofollow noreferrer">img3</a>
  The image address is different and cannot be loaded:</p>
  <p>http://localhost:8080/03cbf410d8344eff6e31.png</p>
  <p>That's  http://localhost:8080/static/imgs/image.337e44c.png in front</p>
  <p>Attach my sass configuration</p>
  <pre class="lang-js prettyprint-override"><code>{
    test: /\.s[ac]ss$/i,
    use: [ 
      &quot;style-loader&quot;,
     {
       loader: 'css-loader',
       options: {
         modules: true /* css-module */
     },
     {
      loader: &quot;sass-loader&quot;,
      options: {
        additionalData: `
          @import '@/assets/styles/var.scss';
          `,
        sassOptions: {
          includePaths: [__dirname]
        },
      },
    }]
  }
  </code></pre>
  <p>It's so weird, please help me</p>