为何process.env配置的BackgroundImage背景图无法在站点显示？

可能的原因及对应解决方案 #

1. 容器div未设置宽高 #

背景图需要依托容器尺寸才能显示，若div无内容且未定义宽高，默认宽高为0，背景图自然无法展示。

修改代码，为div添加宽高及适配样式：

<div 
  style={{ 
    width: '100%', 
    height: '400px', // 根据需求调整尺寸
    backgroundImage: `linear-gradient(to bottom, #6666661a, #151515), url(${process.env.NEXT_PUBLIC_BASEURL}/${project?.thumbnailUrl})`,
    backgroundSize: 'cover', // 确保背景图覆盖容器
    backgroundPosition: 'center' // 让背景图居中显示
  }}
>
</div>

2. 路径拼接存在异常 #

检查拼接后的图片地址是否与img标签的src完全一致：

• 若thumbnailUrl开头已有斜杠，拼接后会出现http://localhost:3000//xxx.jpg这类重复斜杠的情况，部分浏览器解析会出错；
• 若thumbnailUrl开头无斜杠，会出现http://localhost:3000xxx.jpg这类缺少斜杠的无效路径。

修复路径拼接逻辑，确保仅保留一个斜杠：

const imageUrl = `${process.env.NEXT_PUBLIC_BASEURL}${project?.thumbnailUrl.startsWith('/') ? '' : '/'}${project?.thumbnailUrl}`;

<div 
  style={{ 
    width: '100%',
    height: '400px',
    backgroundImage: `linear-gradient(to bottom, #6666661a, #151515), url(${imageUrl})`
  }}
>
</div>

3. 给URL添加引号（可选） #

部分浏览器对未加引号的URL解析存在兼容问题，尝试为url内的地址添加双引号：

backgroundImage: `linear-gradient(to bottom, #6666661a, #151515), url("${imageUrl}")`

验证步骤 #

1. 打印生成的backgroundImage值，确认URL与img标签的src完全一致：

console.log(`linear-gradient(to bottom, #6666661a, #151515), url(${process.env.NEXT_PUBLIC_BASEURL}/${project?.thumbnailUrl})`);

2. 打开浏览器开发者工具，在Elements面板查看div的style是否正确加载backgroundImage属性，同时在Network面板确认图片请求是否返回200状态码。

内容的提问来源于stack exchange，提问作者Lucas Andrade