Image won't render properly when appending properties from dynamic object from JS to the DOM

Question

I already have some images, with container divs, in my HTML file. I have written my JS so that my new image objects are formatted in exactly the same way as my existing HTML images, including the image file paths and the CSS, but when I try to render them with a custom prototype method, only the container div renders properly. Where the image should be on the page, there is only a generic image icon, but no image. There are no error messages in the console. Any ideas why this might be? I have included only the code that I believe to be relevant. Thanks for your help!

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();

.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%;
}

 <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>