How do i add new image on the new card

const row = document.querySelector(".row");
const addItem = document.querySelector(".add-item");

const newProductInput = document.querySelector(".product");
const newPriceInput = document.querySelector(".price");
const newPhotoInput = document.querySelector("#inputImage");
let newCardPhoto = document.createElement('img');


addItem.addEventListener('click', (e) => {
    if (e.target.className === 'addItemBtn') {
        addCardContent();
        addCardPhoto();
    }
})

function addCardPhoto() {
    let reader = new FileReader();

    reader.onload = function() {
        var dataURL = reader.result;
        newCardPhoto.src = dataURL;
    }
    reader.readAsDataURL(newPhotoInput.files[0]);
}

function addCardContent() {

    let newContainer = document.createElement('div');
    let newCard = document.createElement('div');
    let newCardProduct = document.createElement('h4');
    let newCardPrice = document.createElement('p');
    let newBtn = document.createElement('button');



    newCard.className = 'card col';
    newContainer.className = 'container';
    newBtn.className = 'orderBtn';
    newBtn.textContent = 'Order';

    newCardPrice.textContent = newPriceInput.value;
    newCardProduct.textContent = newProductInput.value;

    newCard.appendChild(newCardPhoto);
    newCard.appendChild(newContainer);
    newContainer.appendChild(newCardProduct);
    newContainer.appendChild(newCardPrice);
    newContainer.appendChild(newBtn);

    row.appendChild(newCard);

}

/* ================================= 
  Base Element Styles
==================================== */

* {
    box-sizing: border-box;
    scroll-behavior: smooth;
}

body {
    width: 100%;
    margin: 0;
    padding: 0;
    font-family: 'Lobster', cursive;
}

ul {
    list-style: none;
}

a {
    text-decoration: none;
}

img {
    width: 100%;
}


/* ================================= 
  Base Layout Styles
==================================== */


/* ---- Navigation ---- */

.main-header {
    width: 80%;
    display: flex;
    justify-content: space-between;
    margin: 0 auto;
}

.logo {
    border: 4px solid black;
    border-radius: 4px;
    background-color: black;
}

.logo a {
    color: white;
}

.nav {
    display: flex;
}

.nav li {
    padding: 10px 15px;
}

.nav li a {
    color: black;
    text-transform: uppercase;
}


/* ---- Layout Containers ---- */

.intro-webshop {
    height: 60vh;
    background-color: coral;
    text-align: center;
}

.search-bar {
    width: 80%;
    margin: 4em auto;
    text-align: center;
}

.row {
    width: 80%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: 0 auto;
}

.card {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    transition: 0.3s;
    width: 20%;
    margin: 1em 2em;
}

.image-top {
    width: 100%;
    height: 15vw;
    background-size: cover;
}

.card:hover {
    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
}

.container {
    text-align: center;
    padding: 2px 16px;
}


/* ---- Layout Buttons ---- */

.orderBtn {
    width: 150px;
    background-color: white;
    color: black;
    border: 2px solid #008CBA;
    margin-bottom: 2em;
    cursor: pointer;
    font-family: 'Lobster', cursive;
}

.orderBtn:hover {
    background-color: #008CBA;
    color: white;
}

.add-item {
    margin: auto;
    width: 15%;
    padding: 10px;
}

.add-item input {
    display: block;
}

.add-item p {
    margin: 5px 0;
}

.add-item button {
    margin: 10px 0 0 0;
}


/* ---- Layout Footer ---- */

.main-footer {
    text-align: center;
    background: #d9e4ea;
    padding: 1.5em 0;
    margin-top: 2em;
}


/* ================================= 
  Media Queries
==================================== */

@media (max-width: 415px) {
    .main-header {
        display: block;
        text-align: center;
    }
    .nav {
        display: block;
        padding: 0;
    }
    .nav li {
        padding: 0 0 25px 0;
    }
    .row {
        display: block;
    }
    .card {
        width: 100%;
        margin: 1em 0;
    }
    .image-top {
        height: 100%;
    }
    .add-item {
        width: 50%;
    }
}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Web-Shop Urban</title>
    <link rel="stylesheet" href="/css/webshop.css">
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Lobster&display=swap" rel="stylesheet">
</head>

<body>

    <header class="main-header">
        <h1 class="logo"><a href="/html/index.html">Urban</a></h1>
        <!-- <div id="menu-bar"> -->
        <!-- <div id="menu" onclick="onClickMenu()">
                <div id="bar1" class="bar"></div>
                <div id="bar2" class="bar"></div>
                <div id="bar3" class="bar"></div>
            </div> -->
        <ul class="nav" id="nav">
            <li><a href="/html/index.html#about">About</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
        <!-- </div> -->
    </header>

    <main>
        <div class="intro-webshop">
        </div>
        <div class="search-bar">
            <input type="text"> <button>search</button>
        </div>

        <div class="row">
            <div class="card col">
                <img src="/img/2d8169059eaa219df13b70de2b33676a.jpg" alt="shoes" style="width:100%" class="image-top">
                <div class="container">
                    <h4><b>Produt</b></h4>
                    <p>Price</p>
                    <button class="orderBtn">Order</button>
                </div>
            </div>
            <div class="card col">
                <img src="/img/istockphoto-909472812-170667a.jpg" alt="jeans" style="width:100%" class="image-top">
                <div class="container">
                    <h4><b>Produt</b></h4>
                    <p>Price</p>
                    <button class="orderBtn">Order</button>
                </div>
            </div>
            <div class="card col">
                <img src="/img/unnamed-removebg-preview.png" alt="tshirt" style="width:100%" class="image-top">
                <div class="container">
                    <h4><b>Produt</b></h4>
                    <p>Price</p>
                    <button class="orderBtn">Order</button>
                </div>
            </div>
        </div>


        <div class="add-item">
            <p>Image</p>
            <input type="file" accept='image/*' id="inputImage">
            <p>Produt</p>
            <input type="text" class="product">
            <p>Price</p>
            <input type="text" class="price">
            <button class="addItemBtn">Add item</button>
        </div>

    </main>

    <footer class="main-footer">
        <span>&copy;2021 Urban.</span>
    </footer>
    <script src="/js/javascript.js"></script>
</body>

</html>