无法在 javascript 中显示来自 base64 字符串的图像

Question

我正在尝试使用 javascript 将已格式化为 base64 的原始图像显示为 img 元素。我已经有了base64，但不能让它显示为原始图像，代码有什么问题？

这是代码。

 $.each(post.JobPictures, function (i, pictures) {
                                            if (pictures != null) {
                                                var decodedString = atob(pictures.JobImageContentBytes)
                                                var img = new Image();
                                                img.src = ("data:image/jpg;base64,"+ decodedString);

                                                `<div class="separate-pic">
                                                    <img class="posted-pic" src="`+img+`" alt="" />
                                                </div>`
                                             }
                                    })

现在正在使用 MAP 进行更新，但它根本无法进入

$.ajax({
        url: '@Url.Action("SearchByCategory", "AllJobs")',
        type: 'GET',
        contentType: 'JSON',
        data: { category: categoryId },
        success: function (posts) {

            $(".job-container").html("");
            //$(".job-container").load(" .job-container");

            $.each(posts.FindJobs, function (i, post) {

                var newdate = new Date(post.PostedDate + 'Z');
                var day = newdate.getDate();


                $(".job-container").append(`


                        <li class="separate-job" id="All-Jobs-Id" value="` + post.jobId + `">
                            <div class="content-li-All-Jobs">
                                <h2 class="content-li-All-headline" id="headline-for-Update">`+ post.Headline + `</h2>
                                <a class="btn btn-success bid-for-job" value="`+ post.jobId + `" href="#">Bid now</a>
                                <div class="user">
                                    <blockquote class="blockquote">
                                        <p class="mb-0">
                                            <div class="about-job">`+ post.About + `</div>
                                        </p>
                                        <div class="blockquote-footer">
                                            <cite>-`+ post.Username + `</cite>
                                        </div>
                                    </blockquote>
                                </div>
                                <div class="pictures-li">
                                   `+ $.map(post.jobPictures, function (i, pictures) {
                        if (pictures != null) {
                            var decodedString = atob(pictures.JobImageContentBytes)
                            return `<div class="separate-pic">
                <img class="posted-pic" src="data:image/jpg;base64,${decodedString}" alt="" />
            </div>`;
                        }
                    }).join("") + `
                                </div>

                                <div class="job-date-li">
                                    Posted `+ newdate.getDate() + ` ` + newdate.getMonth() + ` ` + newdate.getFullYear() + 
                `

                                </div>
                                <div class="-job-town">Area | <span class="city">`+ post.JobCity+`</span></div>
                            </div>
                        </li>



                 `)

            });



        }
    });

这是我对控制器进行的整个 ajax 调用，以获取特定类别中的所有作业并创建这些 div 并将相关数据分配给它们

这是显示对象/数组不为空的图像

Answer 1

$.each() 返回其第一个参数的值，因此这将等同于编写：

+ post.JobPictures + 

你需要使用$.map()，回调函数需要返回一些东西，然后你可以用.join()将结果数组连接成一个字符串。

您不应该尝试将img 元素直接连接到字符串中。而是将 base64 字符串替换为 src 属性。

`JobImageContentBytes 中的数据已经被编码为base64，你不需要调用任何东西来编码它。

JobPictures 的开头有一个大写的J。

$.map的回调函数的参数应该是element，index。

+ $.map(post.JobPictures, function (pictures) {
    if (pictures != null) {
        return `<div class="separate-pic">
                    <img class="posted-pic" src="data:image/jpg;base64,${pictures.JobImageContentBytes}" alt="" />
                </div>`;
     }
}).join("") + 

顺便说一句，使用模板文字的意义在于，您不需要结束字符串并使用+ 连接表达式，您可以使用${} 嵌入表达式。所以别写了

src="`+img+`"

改为写

src="${img}"