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>`
                                             }
                                    })

立即更新，现在使用地图，但根本无法使用

$.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}"

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

1 个答案: