如何在JavaScript创建的元素中通过数组显示图片？

你的代码核心问题是设置图片的方式错误，另外还有可优化的DOM查询逻辑，以下是修正后的代码和说明：

修正后的JavaScript代码 #

const styles = [
    {
      description: 'Alunar Gold Leather Sling Back Heels',
      code: 'ALUNAR GDL',
      img: 'static/images/ALUNAR-GDL.jpg'
    },
    {
      description: 'Alunar Green Leather Sling Back Heels',
      code: 'ALUNAR GNL',
      img: 'static/images/ALUNAR-GNL.jpg'
    },
    {
      description: 'Alunar Silver Leather Sling Back Heels',
      code: 'ALUNAR SLL',
      img: 'static/images/ALUNAR-SLL.jpg'
    },
    {
      description: 'Alunar White Leather Sling Back Heels',
      code: 'ALUNAR WTL',
      img: 'static/images/ALUNAR-WTL.jpg'
    },
]

const createStyle = () => {
    // 将容器查询移到循环外，避免重复DOM查询
    const getStyleContainer = document.getElementById('style-container');
    for (let i = 0; i < styles.length; i++) {
        const styleDiv = document.createElement('div');
        styleDiv.setAttribute('class', 'style');
        getStyleContainer.appendChild(styleDiv);
        styleDiv.style.width = '100px';
        styleDiv.style.height = '200px';
        styleDiv.style.margin = '20px';
        styleDiv.style.display = 'flex';
        styleDiv.style.justifyContent = 'center';
        styleDiv.style.alignItems = 'center';
        
        const styleImage = document.createElement('img');
        // 关键修正：img元素通过src属性指定图片路径，而非innerHTML
        styleImage.src = styles[i].img;
        // 添加alt属性，提升网页可访问性
        styleImage.alt = styles[i].description;
        styleDiv.appendChild(styleImage);
        
        styleImage.style.width = '100px';
        styleImage.style.height = '200px';
        styleImage.style.objectFit = 'contain';
    }
}

window.onload = () => {
    createStyle();
}

关键修改说明 #

1. 图片路径设置错误：
   你之前用styleImage.innerHTML = styles[i].img;，但<img>元素是通过src属性加载图片的，innerHTML用于设置元素内部的HTML内容，对自闭合的img标签不生效。改成styleImage.src = styles[i].img;即可正确加载图片。
2. 重复DOM查询优化：
   将document.getElementById('style-container')移到循环外部，避免每次循环都重复查询同一个DOM元素，减少不必要的性能开销。
3. 添加alt属性：
   给img标签添加alt属性是网页可访问性的最佳实践，当图片无法加载时会显示该文本，也方便屏幕阅读器识别内容。

另外请确认图片路径static/images/xxx.jpg是否正确，需保证该路径相对于HTML文件的位置是准确的（比如HTML在根目录时，static文件夹也需在根目录下），否则图片仍无法加载。

内容的提问来源于stack exchange，提问作者KirstyF