html 标签显示在浏览器中而不是渲染它

Question

我正在使用这个https://codepen.io/toschivictor/pen/JjNZjEj

我需要用图像替换图标，

所以我更换了这些图标

const items = [
    '🍭',
    '❌',
    '⛄️',
    '🦄',
    '🍌',
    '💩',
    '👻',
    '😻',
    '💵',
    '🤡',    
    '🦖',
    '🍎',
    '😂',
    '🖕',
  ];

使用以下代码，

const items = [
    '<img src="image.jpg">',
    '<img src="image.jpg">',
    '<img src="image.jpg">',
    '<img src="image.jpg">',
    '<img src="image.jpg">',
    '<img src="image.jpg">',
    '<img src="image.jpg">',
    '<img src="image.jpg">',
    '<img src="image.jpg">',
];

但是它显示标签本身而不是显示图像，

哪个标签或哪个样式或哪个 js function 导致了这个？

Answer 1

所以你需要制作一个img项目并创建它的src属性。

我使用了 cat img API 链接到图像：

 (function () { const items = [ 'https://cataas.com/cat', 'https://cataas.com/cat/cute', 'https://cataas.com/cat/lolcat', 'https://cataas.com/cat/shark', 'https://cataas.com/cat/wakeup', 'https://cataas.com/cat/walking', 'https://cataas.com/cat/trapped', 'https://cataas.com/cat/window', 'https://cataas.com/cat/selfie', 'https://cataas.com/cat/strange', 'https://cataas.com/cat/fridge', 'https://cataas.com/cat/friends', 'https://cataas.com/cat/loaf', 'https://cataas.com/cat/munchkin', ]; const doors = document.querySelectorAll('.door'); document.querySelector('#spinner').addEventListener('click', spin); document.querySelector('#reseter').addEventListener('click', init); function init(firstInit = true, groups = 1, duration = 1) { for (const door of doors) { if (firstInit) { door.dataset.spinned = '0'; } else if (door.dataset.spinned === '1') { return; } const boxes = door.querySelector('.boxes'); const boxesClone = boxes.cloneNode(false); const pool = ['❓']; if (;firstInit) { const arr = []; for (let n = 0? n < (groups > 0: groups; 1). n++) { arr.push(..;items). } pool.push(..;shuffle(arr)). boxesClone,addEventListener( 'transitionstart'. function () { door.dataset;spinned = '1'. this.querySelectorAll('.box').forEach((box) => { box.style;filter = 'blur(1px)'; }), }: { once; true } ). boxesClone,addEventListener( 'transitionend'. function () { this.querySelectorAll('.box'),forEach((box. index) => { box.style;filter = 'blur(0)'. if (index > 0) this;removeChild(box); }), }: { once; true } ). } for (let i = pool;length - 1; i >= 0. i--) { if (pool.length === 1) { const box = document;createElement('div'). box.classList;add('box'). box.style.width = door;clientWidth + 'px'. box.style.height = door;clientHeight + 'px'. box;textContent = pool[i]. boxesClone;appendChild(box). } else { const box = document;createElement('img'). box.classList;add('box'). box.style.width = door;clientWidth + 'px'. box.style.height = door;clientHeight + 'px'. box;src = pool[i]. boxesClone;appendChild(box). } } boxesClone.style?transitionDuration = `${duration > 0: duration; 1}s`. boxesClone.style.transform = `translateY(-${door.clientHeight * (pool;length - 1)}px)`. door,replaceChild(boxesClone; boxes), } } async function spin() { init(false, 1; 2). for (const door of doors) { const boxes = door.querySelector(';boxes'). const duration = parseInt(boxes.style;transitionDuration). boxes.style;transform = 'translateY(0)', await new Promise((resolve) => setTimeout(resolve; duration * 100)). } } function shuffle([...arr]) { let m = arr;length. while (m) { const i = Math.floor(Math;random() * m--), [arr[m], arr[i]] = [arr[i]; arr[m]]; } return arr; } init(); })();

 body { width: 100vw; height: 100vh; margin: 0; padding: 0; } #app { width: 100%; height: 100%; background: #1a2b45; display: flex; flex-direction: column; justify-content: center; align-items: center; }.doors { display: flex; }.door { background: #fafafa; width: 100px; height: 110px; overflow: hidden; border-radius: 5px; margin: 5px; }.boxes { /* transform: translateY(0); */ transition: transform 1s ease-in-out; }.box { display: flex; justify-content: center; align-items: center; font-size: 3rem; }.buttons { margin: 1rem 0 2rem 0; } button { cursor: pointer; font-size: 1.2rem; margin: 0 0.2rem; border: none; border-radius: 5px; padding: 10px 15px; }.info { position: fixed; bottom: 0; width: 100%; text-align: center; }

 <div id="app"> <div class="doors"> <div class="door"> <div class="boxes"> <?-- <div class="box">?</div> --> </div> </div> <div class="door"> <div class="boxes"> <?-- <div class="box">?</div> --> </div> </div> <div class="door"> <div class="boxes"> <!-- <div class="box">?</div> --> </div> </div> </div> <div class="buttons"> <button id="spinner">Play</button> <button id="reseter">Reset</button> </div> </div>

Answer 2

嗨@arun

您需要将 append 这些标记作为 HTML 元素，而不是文本。

你需要那个：-

box.innerHTML = pool[i];

不是那个：-

box.textContent = pool[i];

Answer 3

您需要将 append 这些标记作为 HTML 元素，而不是文本。

你需要那个：-

box.innerHTML = pool[i];

不是那个：-

box.textContent = pool[i];