从字节数组加载多张图片时JS崩溃问题求助

问题根源 #

你的JS代码崩溃是因为循环生成的全局JS代码里重复使用let声明img变量。let不允许在同一作用域（这里是全局作用域）重复声明同名变量，当第二条及以上商品生成JS代码时，会抛出Uncaught SyntaxError: Identifier 'img' has already been declared错误，导致后续JS执行中断，图片无法加载。

现有代码快速修复 #

方案1：改用var声明（兼容重复声明） #

@model List<PhotoModel>

@foreach (var photo in Model)
{
    <img src="" id="@photo.Id" >
}

<script>
    @foreach (var photo in Model)
    {
        <text>
            var id = @Html.Raw(Json.Serialize(photo.Id));
            var bytes = @Html.Raw(Json.Serialize(photo.Bytes));
            var img = document.getElementById(id); // 改用var避免重复声明报错
            if (img) { // 增加存在性检查，避免找不到元素导致后续代码出错
                img.src = "data:image/png;base64," + bytes;
            }
        </text>
    }
</script>

方案2：用块级作用域隔离变量 #

@model List<PhotoModel>

@foreach (var photo in Model)
{
    <img src="" id="@photo.Id" >
}

<script>
    @foreach (var photo in Model)
    {
        <text>
            { // 用{}创建独立块级作用域，隔离每个迭代的变量
                const id = @Html.Raw(Json.Serialize(photo.Id));
                const bytes = @Html.Raw(Json.Serialize(photo.Bytes));
                const img = document.getElementById(id);
                if (img) {
                    img.src = "data:image/png;base64," + bytes;
                }
            }
        </text>
    }
</script>

更优实现思路 #

思路1：直接在Razor中生成Data URI（无需JS） #

完全规避JS依赖，页面加载时直接渲染图片，更高效且无JS报错风险：

@model List<PhotoModel>

@foreach (var photo in Model)
{
    <img src="data:image/png;base64,@Convert.ToBase64String(photo.Bytes)" 
         alt="商品图片" 
         id="@photo.Id" />
}

注意：如果图片体积较大，大量base64编码会导致HTML文件过大，拖慢页面加载速度，此时不建议使用该方案。

思路2：通过后端接口返回图片（推荐） #

1. 后端新增接口（如/api/photos/{id}），根据图片ID读取数据库中的字节流，返回image/png类型的响应；
2. Razor代码直接引用接口地址：

@model List<PhotoModel>

@foreach (var photo in Model)
{
    <img src="/api/photos/@photo.Id" 
         alt="商品图片" 
         id="@photo.Id" 
         loading="lazy" /> <!-- 可选：懒加载优化页面性能 -->
}

该方案优势：

• HTML体积小，页面加载速度更快；
• 浏览器可缓存图片，重复访问无需重新下载；
• 可在后端扩展权限控制、图片压缩、格式转换等逻辑，扩展性更强。

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