URL加载器，加载一次我的背景图像，然后在刷新页面后无法显示

Question

我正在使用带有文件加载器和url加载器的next.js将图像加载到我的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，但它没有出现。

**更新**

我现在注意到，当图像第一次出现时，您可以进行更改，并且它仍然可以查看。实际上，在您执行消失的硬/软刷新之前，它不会。

Answer 1

url 必须是字符串中的字符串：

url("${background}");