typescript вывести изображения из массива

Question

Получаю от бэка массив изображений (в base64) которые не знаю как разместить на страничке. Помогите, пжлста. Если в массиве 1 элемент, то всё OK, если больше - изображения не отображаются.

@property({
    type: Object
}) qrCode = [];


render() {
    console.log(this.qrCode)
    return html `
        <div id="qr-img">
            <img src="${this.qrCode}"
                 style="display: block; margin: auto" onclick="printDiv()"/>
        </div>
    `}

Answer 1

Можно с помощью метода map() создать новый массив строк, которые будут содержать значения из массива qrCode, а затем с помощью метода join() объединить получившийся массив в одну строку, её и возвращать в методе render()

const qrCode = ["src1", "src2", "src3"];

const html = qrCode
              .map(
                (src) => `
<div id="qr-img">
  <img src="${src}" style="display: block; margin: auto" onclick="printDiv()"/>
</div>`
              )
              .join("");

console.log(html);

Answer 2

У вас же написано, что qrCode это массив. А вы его как строку просто выводить пытаетесь.

@property({
    type: Object
}) qrCode = [];

Когда приходит 1 элемент это тоже массив, или просто строка? Если массив:

render() {
    console.log(this.qrCode)
    const images = this.qrCode.map(i => `
        <div id="qr-img">
            <img src="${i}"
                 style="display: block; margin: auto" onclick="printDiv()"/>
        </div>`
    );
    return html images.join()}

Если когда 1 элемент то приходить просто строка, то необходимо выполнить проверку

Array.isArray(this.qrCode)

Если тру, то вариант как я показал выше, если фолс - фаш вариант

Answer 3

Сработало только без .join

@property({
  type: Object
}) qrCode = [];


render() {
    return html `
        <div id="qr-img">
            ${this.qrCode.map(x => html `
                <img src="${x}"
                     style="display: block; margin: auto" onclick="printDiv()"/>
            `)}
        </div>
    `}

БЛОГ НА HUSL

typescript вывести изображения из массива

Ответы (3 шт):