我使用 next.js 和 file-loader 和 url-loader 将图像加载到我的 React 组件中，如下所示：

import background from '@/assets/mountain-shot.jpg';
const Section = styled.section`
  background-color: #f3f3f3;
  background-image: url(${background});
  background-size: cover;
  background-position: center;

  box-shadow: inset 2px 33px 97px -21px rgba(0,0,0,0.75);
  position: relative;
`;

如您所见，我正在导入图像并将其输出到样式组件中。如果我删除背景图片，它会加载背景#f3f3f3，然后我放回背景图片，图片会加载。正是在这一点上，我进行了刷新，该块中的图像和所有其他样式都消失了。

我想这可能是我的 next.config 设置的问题，所以我将在下面粘贴：

config.module.rules.push({
  test: /\.(woff(2)?|ttf|eot|gif|png|jp(e*)g)(\?v=\d+\.\d+\.\d+)?$/,
  use: [
    {
      loader: 'url-loader',
      options: {
        limit: 8000, // Convert images < 8kb to base64 strings
        name: 'images/[hash]-[name].[ext]',
      },
    },
  ],
});

我们正在使用 Next.js 来做我们的 SSR，这可能值得一提。

当我控制台日志背景时，我在第一次加载时得到这个值： /_next/webpack/images/b3f1c5846e75c47d10b0fa02957ac1b4-mountain-shot.jpg

在样式消失的第二次加载中，我得到了完全相同的 url，但它没有出现。

** 更新 **

我现在注意到，当图像第一次出现时，您可以进行更改，它仍然可以查看。直到您执行消失的硬/软刷新后，它才真正生效。