API返回图片路径为null时不显示图片的代码修复咨询

问题分析 #

当前代码直接对logoPath数组的所有元素映射生成<img>标签，当元素为null时，logo.concat(C)会把null转为字符串"null"，导致生成的img标签src为logo+"null"，浏览器会尝试加载这个无效路径，而非不显示图片。

修复方案 #

方案1：先过滤无效值再映射 #

用filter方法先移除数组中的null元素，再生成img标签：

${logoPath.filter(C => C !== null).map((C) => `<img alt="" class="production-logo" src="${logo.concat(C)}">`)}

方案2：映射时判断元素有效性 #

在map中通过三元表达式判断，仅对非null元素生成img标签，空值返回空字符串，最后用join('')拼接避免出现数组逗号分隔符：

${logoPath.map((C) => C !== null ? `<img alt="" class="production-logo" src="${logo.concat(C)}">` : '').join('')}

补充说明 #

• 方案1更高效，提前过滤无效元素减少后续处理量；
• 方案2可保留原数组的位置结构（若业务有相关需求），最终拼接后不影响页面展示。

内容的提问来源于stack exchange，提问作者Mahendra Meghwal