Невозможно отобразить изображение из строки base64 в JavaScript

Question

Я пытаюсь отобразить необработанное изображение, отформатированное в base64, в элемент img с помощью javascript. У меня уже есть 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("") + 

BTWсмысл использования шаблонных литералов в том, что вам не нужно заканчивать строку и использовать + для объединения выражений, вы можете встроить выражение с помощью ${}.Поэтому не пишите

src="`+img+`"

Вместо этого пишите

src="${img}"