JS动态对象向DOM添加图片时无法正常渲染的问题排查

我HTML文件中已存在若干带容器div的图片，编写JS创建新的图片对象（包含图片路径、CSS样式），想要让它与现有HTML图片格式完全一致，但通过自定义原型方法渲染时，仅容器div正常显示，图片位置仅显示通用图片图标，控制台无报错信息，附上相关代码请求排查原因：

相关代码 #

HTML #

<div class="gallery">
    <div class="cone-container">
        <img src="images/doug-fir-seed-cone.jfif" alt="douglas fir seed cone" data-height="70-330ft" name="image" data-species="Douglas Fir">
    </div>
    <div class="cone-container">
        <img src="images/lodgepole-pine-cone.jpg" alt="lodgepole pine cone" data-height="70-80ft" name="image" data-species="Lodgepole Pine">
    </div>
    <div class="cone-container">
        <img src="images/noble-fir-cone.jpg" alt="noble fir seed cone" data-height="180-270ft" name="image" data-species="Noble Fir">
    </div>
    <div class="cone-container">
        <img src="images/sitka-spruce-cone.jpg" alt="sitka sprunce cone" data-height="125-180ft" name="image" data-species="Sitka Spruce">
    </div>
    <div class="cone-container">
        <img src="images/western-hemlock-cone.jpg" alt="western hemlock cone" data-height="165-230ft" name="image" data-species="Western Hemlock">
    </div>
    <div class="cone-container">
        <img src="images/western-redcedar-cone.jpg" alt="western redcedar cone" data-height="215ft" name="image" data-species="Western Redcedar">
    </div>
    <div class="cone-container">
        <img src="images/Shore-Pine-cone.jpg" alt="shore pine cone" data-height="100ft" name="image" data-species="Shore Pine">
    </div>
</div>

CSS #

.gallery {
    background-color: rgba(39, 213, 121, 0.73);
    background-image: url(images/landscape2.jpg);
    background-size: cover;
    display: grid;
    grid-template-columns: repeat(auto-fill, 300px);
    gap: 20px;
    overflow: hidden;
}

.cone-container {
    height: 300px;
    width: 300px;
    padding: 10px;
    margin: 10px;
    display: flex;
    justify-content: center;
}

.cone-container img {
    max-width: 100%;
    border-radius: 10%;
}

JavaScript #

const gallery = document.querySelector('.gallery');

function Cone (src, species, height) {
    this.container = document.createElement('div');
    this.image = document.createElement('img');
    this.image.src = src;
    this.species = species;
    this.height = height;
}

Cone.prototype.populateHTML = function() {
    this.container.classList.add('cone-container');
    this.container.appendChild(this.image);
    console.log(this.container)
    gallery.appendChild(this.container);    
}

const lodgepolePine = new Cone('./images/lodgepole-pine-cone.jpg', 'Lodgepole Pine', '300ft');

lodgepolePine.populateHTML();

核心问题：图片路径不匹配 #

现有HTML中的图片路径是相对HTML文件所在目录的images/xxx，但你在JS中传入的路径是./images/xxx。如果你的JS文件和HTML文件不在同一目录（比如JS放在子文件夹里），./会指向JS文件所在的子目录，导致图片实际请求路径错误，加载失败。

浏览器控制台没报错是因为图片加载失败的提示通常不会出现在主控制台，需要到「开发者工具-网络」面板查看，大概率能看到该图片的请求状态为404。

修复步骤 #

把JS中传入的图片路径开头的./去掉，和HTML保持一致的路径格式：

// 修改前
const lodgepolePine = new Cone('./images/lodgepole-pine-cone.jpg', 'Lodgepole Pine', '300ft');

// 修改后
const lodgepolePine = new Cone('images/lodgepole-pine-cone.jpg', 'Lodgepole Pine', '300ft');

额外优化建议 #

为了和现有HTML图片的格式完全一致，建议在Cone构造函数中给img标签添加alt、data-height、data-species等属性：

function Cone (src, species, height) {
    this.container = document.createElement('div');
    this.image = document.createElement('img');
    this.image.src = src;
    // 补充属性，和现有图片对齐
    this.image.alt = `${species} cone`;
    this.image.dataset.height = height;
    this.image.dataset.species = species;
    this.image.name = "image";
    
    this.species = species;
    this.height = height;
}

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