无法显示数组中的图像

Question

我正在尝试使用Javascript找出购物车的代码，一切都进行得很好，但我发现自己无法显示文章的图像。一切都在显示器内，我可以使所有文字都显示出来，但是我真的不知道什么不适用于img。

这是我的数组

window.onload = function () {
            var baseDeDatos = [
                {
                    id: 1,
                    nombre: 'Jean Mom',
                    precio: 1399,
                    img: 'img/1.jpg'
                },
                {
                    id: 2,
                    nombre: 'Pant Ren',
                    precio: 990,
                    img: 'img/2.jpg'
                },
                {
                    id: 3,
                    nombre: 'Buzo Largo',
                    precio: 948,
                    img: 'img/3.jpg'
                },
                {
                    id: 4,
                    nombre: 'Cycle Short',
                    precio: 550,
                    img: 'img/4.jpg'
                },
                {
                    id: 5,
                    nombre: 'Top Cellie',
                    precio: 590,
                    img: 'img/5.jpg'
                },
                {
                    id: 6,
                    nombre: 'Jacket Denim',
                    precio: 2890,
                    img: 'img/6.jpg'
                },
                {
                    id: 7,
                    nombre: 'Cinto Vice',
                    precio: 499,
                    img: 'img/7.jpg'
                },
                {
                    id: 8,
                    nombre: 'Top Caro',
                    precio: 499,
                    img: 'img/8.jpg'
                },
                {
                    id: 9,
                    nombre: 'Bra Top Regan',
                    precio: 590,
                    img: 'img/9.jpg'
                },
                {
                    id: 10,
                    nombre: 'Sweater Polly',
                    precio: 1399,
                    img: 'img/10.jpg'
                },
                {
                    id: 11,
                    nombre: 'Camisa June',
                    precio: 799,
                    img: 'img/10.jpg'
                },
                {
                    id: 12,
                    nombre: 'Pant Amy',
                    precio: 1299,
                    img: 'img/1.jpg'
                },
                {
                    id: 13,
                    nombre: 'Top Tai',
                    precio: 648,
                    img: 'img/1.jpg'
                },
                {
                    id: 14,
                    nombre: 'Tapado Judy',
                    precio: 3290,
                    img: 'img/1.jpg'
                },
                {
                    id: 15,
                    nombre: 'Mini Corderoy',
                    precio: 1090,
                    img: 'img/1.jpg'
                }

            ]
            
            var $items = document.querySelector('#items');
            var carrito = [];
            var total = 0;
            var $carrito = document.querySelector('#carrito');
            var $total = document.querySelector('#total');

            function renderItems () {
                for (var info of baseDeDatos) {

                    var miNodo = document.createElement('div');
                    miNodo.classList.add('card', 'col-sm-4');
                    
                    var miNodoCardBody = document.createElement('div');
                    miNodoCardBody.classList.add('card-body');

                    var miNodoTitle = document.createElement('h5');
                    miNodoTitle.classList.add('card-title');
                    miNodoTitle.textContent = info['nombre'];
                    
                    var miNodoImg = document.createElement('img');
                    miNodoImg.classList.add('card-text');
                    miNodoImg.textContent = info['img'];

                    var miNodoPrecio = document.createElement('p');
                    miNodoPrecio.classList.add('card-text');
                    miNodoPrecio.textContent = '$' +info['precio'];

                    var miNodoBoton = document.createElement('button');
                    miNodoBoton.classList.add('btn', 'btn-primary');
                    miNodoBoton.textContent = 'Agregar al carrito';
                    miNodoBoton.setAttribute('marcador', info['id']);
                    miNodoBoton.addEventListener('click', anyadirCarrito);

                    miNodoCardBody.appendChild(miNodoTitle);
                    miNodoCardBody.appendChild(miNodoPrecio);
                    miNodoCardBody.appendChild(miNodoBoton);
                    miNodo.appendChild(miNodoCardBody);
                    $items.appendChild(miNodo);
                }
            }
            function anyadirCarrito () {
                carrito.push(this.getAttribute('marcador'))
                calcularTotal();
                renderizarCarrito();

            }

            function renderizarCarrito () {
                $carrito.textContent = '';
                carrito.forEach(function (item, indice) {
                    var miItem = baseDeDatos.filter(function(itemBaseDatos) {
                        return itemBaseDatos['id'] == item;
                    });
                    var miNodo = document.createElement('li');
                    miNodo.classList.add('list-group-item', 'text-right');
                    miNodo.textContent = `${miItem[0]['nombre']} - $${miItem[0]['precio']}`;
                    var miBoton = document.createElement('button');
                    miBoton.classList.add('btn', 'btn-danger', 'mx-5');
                    miBoton.textContent = 'X';
                    miBoton.setAttribute('posicion', indice);
                    miBoton.addEventListener('click', borrarItemCarrito);
                    miNodo.appendChild(miBoton);
                    $carrito.appendChild(miNodo);
                })
            }

            function borrarItemCarrito () {
                var posicion = this.getAttribute('posicion');
                carrito.splice(posicion, 1);
                renderizarCarrito();
                calcularTotal();
            }

            function calcularTotal () {
                total = 0;
                for (var item of carrito) {
                    var miItem = baseDeDatos.filter(function(itemBaseDatos) {
                        return itemBaseDatos['id'] == item;
                    });
                    total = total + miItem[0]['precio'];
                }
                var totalDosDecimales = total.toFixed(2);
                $total.textContent = totalDosDecimales;
            }
            renderItems();
        } 

@import url('https://fonts.googleapis.com/css?family=Raleway:300,400,700');
@import url("https://fonts.googleapis.com/css?family=Metal+Mania");

@font-face {
    font-family: "Booter - Zero Zero";
    src: url("Fonts/Booter - Zero Zero.woff") format("woff"),
         url("Fonts/Booter - Zero Zero.woff2") format("woff2");
    font-weight: normal;
    font-style: normal;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Raleway;
    color: #777;
}

body{
    background-color: #fffbed;
}

nav{
    margin-bottom: 20px;
}

ul,
li {
    text-decoration: none;
    list-style: none;
}
}
.borrar:hover {
    background-color: #f8051b;
    opacity: 0.8;
    transition: 0.5s;
}

.enviar:hover {
    background-color: #009AAC;
    opacity: 0.8;
    transition: 0.5s;
}
.boton1{
    background-color: #eb7681;
}
.boton2{
    background-color: #78e5c3;
}
footer{
    background-color: #f0ffff;
    background-size: cover;
}

.btn-primary {
    color: white;
    background-color: #f25656;
    border: none;
    border-radius: .3em;
    font-weight: bold;
}

.btn-primary:hover {
    background-color: #5f4141;
}

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Final Diseño y Programación Web</title>
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
    <link rel="stylesheet" href="estilos.css">
    <script src="java.js"></script>
    
</head>

<body>
  
   <header class="container fixed-top ">
        <h1 id="logo">Las Pepas</h1>
        <div class="row">
            <nav class="col navbar fixed-top navbar-expand-md navbar-light bg-light ">
                <button class="navbar-toggler ml-auto" type="button" data-toggle="collapse" data-target="#barra" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="collapse navbar-collapse" id="barra">
                    <ul class="navbar-nav text-center mx-auto px-1">
                        <li class="nav-item">
                            <a class="nav-link" href="#uno" data-ancla="true" data-tiempo="800" data-freno="60">Home</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#dos" data-ancla="true" data-tiempo="800" data-freno="60">Productos</a>
                        </li>
        
                        <li class="nav-item">
                              <a class="nav-link" href="#tres" data-ancla="true" data-tiempo="800" data-freno="60">Contacto</a>
                        </li>
                    </ul>
                </div>
            </nav>
        </div>
    </header>
    <section id="dos">
       <div  class="container">
        <div class="row">
            <main id="items" class="col-sm-8 row pt-5"></main>
            <aside class="col-sm-4 pt-5">
                <h2>Carrito</h2>
                <ul id="carrito" class="list-group"></ul>
                <hr>
                <p class="text-right">Total: <span id="total"></span>&dollar;</p>
            </aside>
        </div>
        </div>
    </section>
   <section id="tres" class="container">
         <div class="row">
             <div class="col-md-6 pb-3 my-auto mx-auto">
             <h2 class="text-center">Seguinos en nuestras redes</h2>
                  <div class="row pl-2 d-flex justify-content-center align-items-center mr-5">
                    <div class="col-2 pr-2">
                        <ul>
                            <li>
                                <a href="https://es-la.facebook.com/" target="_blank">
                                    <img src="img/fb.png" alt="Facebook">
                                </a>
                            </li>
                        </ul>
                    </div>
                    <div class="col-2  pr-2">
                        <ul>
                            <li>
                                <a href="https://twitter.com/?lang=es/" target="_blank">
                                    <img src="img/tw.png" alt="Twitter">
                                </a>
                            </li>
                        </ul>
                    </div>
                      
                    <div class="col-2  pr-2">
                        <ul>
                            <li>
                                <a href="https://www.instagram.com/?hl=es-la" target="_blank">
                                    <img src="img/ig.png" alt="Instagram">
                                </a>
                            </li>
                        </ul>
                    </div>
               
           </div>
            </div>
           <div class=" col-md-6 col-11  text-md-left text-center ml-md-0 ml-4">
            <aside class="col-lg-10">

                <h3 class="text-center mt-5">¡Contactanos!</h3>
                
                <form action="enviar_formulario.php" method="post" enctype="multipart/form-data">
                    <div class="form-group">
                        <label for="nombre">Nombre</label>
                        <input type="text" class="form-control bordes" id="nombre" placeholder="Nombre..." name="nombre">
                    </div>
                       

                    <div class="form-group">
                        <label for="mail">Email</label>
                        <input type="email" class="form-control bordes" id="mail" placeholder="email..."  name="mail">
                    </div>

                    <div class="form-group">
                        <label for="comentario">Consulta</label>
                        <textarea id="comentario" class="form-control bordes" cols="30" rows="5" name="comentario"></textarea>
                    </div>
                                    
                    <input type="reset" value="Borrar" class="btn boton1 borrar my-5">
                    <input type="submit" value="Enviar" class="btn boton2 enviar my-5">

                </form>
            </aside>
        </div>
        </div>
        
    </section>
    
     <footer class="opacity p-3 text-center" >
        
       <p class="bold"> Diseño y Programación web - DMM3A - 2019</p>
        
    </footer>
</body>
</html>

Answer 1

您好，您没有添加创建miNodoImg的元素。 此外，图片元素缺少.src属性

请检查下面的代码

window.onload = function () {
            var baseDeDatos = [
                {
                    id: 1,
                    nombre: 'Jean Mom',
                    precio: 1399,
                    img: 'https://www.gstatic.com/webp/gallery/1.jpg'
                },
                {
                    id: 2,
                    nombre: 'Pant Ren',
                    precio: 990,
                    img: 'https://www.gstatic.com/webp/gallery/1.jpg'
                },
                {
                    id: 3,
                    nombre: 'Buzo Largo',
                    precio: 948,
                    img: 'https://www.gstatic.com/webp/gallery/1.jpg'
                },
                {
                    id: 4,
                    nombre: 'Cycle Short',
                    precio: 550,
                    img: 'img/4.jpg'
                },
                {
                    id: 5,
                    nombre: 'Top Cellie',
                    precio: 590,
                    img: 'img/5.jpg'
                },
                {
                    id: 6,
                    nombre: 'Jacket Denim',
                    precio: 2890,
                    img: 'img/6.jpg'
                },
                {
                    id: 7,
                    nombre: 'Cinto Vice',
                    precio: 499,
                    img: 'img/7.jpg'
                },
                {
                    id: 8,
                    nombre: 'Top Caro',
                    precio: 499,
                    img: 'img/8.jpg'
                },
                {
                    id: 9,
                    nombre: 'Bra Top Regan',
                    precio: 590,
                    img: 'img/9.jpg'
                },
                {
                    id: 10,
                    nombre: 'Sweater Polly',
                    precio: 1399,
                    img: 'img/10.jpg'
                },
                {
                    id: 11,
                    nombre: 'Camisa June',
                    precio: 799,
                    img: 'img/10.jpg'
                },
                {
                    id: 12,
                    nombre: 'Pant Amy',
                    precio: 1299,
                    img: 'img/1.jpg'
                },
                {
                    id: 13,
                    nombre: 'Top Tai',
                    precio: 648,
                    img: 'img/1.jpg'
                },
                {
                    id: 14,
                    nombre: 'Tapado Judy',
                    precio: 3290,
                    img: 'img/1.jpg'
                },
                {
                    id: 15,
                    nombre: 'Mini Corderoy',
                    precio: 1090,
                    img: 'img/1.jpg'
                }

            ]
            
            var $items = document.querySelector('#items');
            var carrito = [];
            var total = 0;
            var $carrito = document.querySelector('#carrito');
            var $total = document.querySelector('#total');

            function renderItems () {
                for (var info of baseDeDatos) {

                    var miNodo = document.createElement('div');
                    miNodo.classList.add('card', 'col-sm-4');
                    
                    var miNodoCardBody = document.createElement('div');
                    miNodoCardBody.classList.add('card-body');

                    var miNodoTitle = document.createElement('h5');
                    miNodoTitle.classList.add('card-title');
                    miNodoTitle.textContent = info['nombre'];
                    
                    var miNodoImg = document.createElement('img');
                    miNodoImg.classList.add('card-text');
                    miNodoImg.textContent = info['img'];
                    miNodoImg.src = info['img'];

                    var miNodoPrecio = document.createElement('p');
                    miNodoPrecio.classList.add('card-text');
                    miNodoPrecio.textContent = '$' +info['precio'];

                    var miNodoBoton = document.createElement('button');
                    miNodoBoton.classList.add('btn', 'btn-primary');
                    miNodoBoton.textContent = 'Agregar al carrito';
                    miNodoBoton.setAttribute('marcador', info['id']);
                    miNodoBoton.addEventListener('click', anyadirCarrito);

                    miNodoCardBody.appendChild(miNodoTitle);
                    miNodoCardBody.appendChild(miNodoPrecio);
                    miNodoCardBody.appendChild(miNodoBoton);                           miNodoCardBody.appendChild(miNodoImg);
                    miNodo.appendChild(miNodoCardBody);
                    $items.appendChild(miNodo);
                }
            }
            function anyadirCarrito () {
                carrito.push(this.getAttribute('marcador'))
                calcularTotal();
                renderizarCarrito();

            }

            function renderizarCarrito () {
                $carrito.textContent = '';
                carrito.forEach(function (item, indice) {
                    var miItem = baseDeDatos.filter(function(itemBaseDatos) {
                        return itemBaseDatos['id'] == item;
                    });
                    var miNodo = document.createElement('li');
                    miNodo.classList.add('list-group-item', 'text-right');
                    miNodo.textContent = `${miItem[0]['nombre']} - $${miItem[0]['precio']}`;
                    var miBoton = document.createElement('button');
                    miBoton.classList.add('btn', 'btn-danger', 'mx-5');
                    miBoton.textContent = 'X';
                    miBoton.setAttribute('posicion', indice);
                    miBoton.addEventListener('click', borrarItemCarrito);
                    miNodo.appendChild(miBoton);
                    $carrito.appendChild(miNodo);
                })
            }

            function borrarItemCarrito () {
                var posicion = this.getAttribute('posicion');
                carrito.splice(posicion, 1);
                renderizarCarrito();
                calcularTotal();
            }

            function calcularTotal () {
                total = 0;
                for (var item of carrito) {
                    var miItem = baseDeDatos.filter(function(itemBaseDatos) {
                        return itemBaseDatos['id'] == item;
                    });
                    total = total + miItem[0]['precio'];
                }
                var totalDosDecimales = total.toFixed(2);
                $total.textContent = totalDosDecimales;
            }
            renderItems();
        } 

@import url('https://fonts.googleapis.com/css?family=Raleway:300,400,700');
@import url("https://fonts.googleapis.com/css?family=Metal+Mania");

@font-face {
    font-family: "Booter - Zero Zero";
    src: url("Fonts/Booter - Zero Zero.woff") format("woff"),
         url("Fonts/Booter - Zero Zero.woff2") format("woff2");
    font-weight: normal;
    font-style: normal;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Raleway;
    color: #777;
}

body{
    background-color: #fffbed;
}

nav{
    margin-bottom: 20px;
}

ul,
li {
    text-decoration: none;
    list-style: none;
}
}
.borrar:hover {
    background-color: #f8051b;
    opacity: 0.8;
    transition: 0.5s;
}

.enviar:hover {
    background-color: #009AAC;
    opacity: 0.8;
    transition: 0.5s;
}
.boton1{
    background-color: #eb7681;
}
.boton2{
    background-color: #78e5c3;
}
footer{
    background-color: #f0ffff;
    background-size: cover;
}

.btn-primary {
    color: white;
    background-color: #f25656;
    border: none;
    border-radius: .3em;
    font-weight: bold;
}

.btn-primary:hover {
    background-color: #5f4141;
}

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Final Diseño y Programación Web</title>
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
    <link rel="stylesheet" href="estilos.css">
    <script src="java.js"></script>
    
</head>

<body>
  
   <header class="container fixed-top ">
        <h1 id="logo">Las Pepas</h1>
        <div class="row">
            <nav class="col navbar fixed-top navbar-expand-md navbar-light bg-light ">
                <button class="navbar-toggler ml-auto" type="button" data-toggle="collapse" data-target="#barra" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="collapse navbar-collapse" id="barra">
                    <ul class="navbar-nav text-center mx-auto px-1">
                        <li class="nav-item">
                            <a class="nav-link" href="#uno" data-ancla="true" data-tiempo="800" data-freno="60">Home</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#dos" data-ancla="true" data-tiempo="800" data-freno="60">Productos</a>
                        </li>
        
                        <li class="nav-item">
                              <a class="nav-link" href="#tres" data-ancla="true" data-tiempo="800" data-freno="60">Contacto</a>
                        </li>
                    </ul>
                </div>
            </nav>
        </div>
    </header>
    <section id="dos">
       <div  class="container">
        <div class="row">
            <main id="items" class="col-sm-8 row pt-5"></main>
            <aside class="col-sm-4 pt-5">
                <h2>Carrito</h2>
                <ul id="carrito" class="list-group"></ul>
                <hr>
                <p class="text-right">Total: <span id="total"></span>&dollar;</p>
            </aside>
        </div>
        </div>
    </section>
   <section id="tres" class="container">
         <div class="row">
             <div class="col-md-6 pb-3 my-auto mx-auto">
             <h2 class="text-center">Seguinos en nuestras redes</h2>
                  <div class="row pl-2 d-flex justify-content-center align-items-center mr-5">
                    <div class="col-2 pr-2">
                        <ul>
                            <li>
                                <a href="https://es-la.facebook.com/" target="_blank">
                                    <img src="img/fb.png" alt="Facebook">
                                </a>
                            </li>
                        </ul>
                    </div>
                    <div class="col-2  pr-2">
                        <ul>
                            <li>
                                <a href="https://twitter.com/?lang=es/" target="_blank">
                                    <img src="img/tw.png" alt="Twitter">
                                </a>
                            </li>
                        </ul>
                    </div>
                      
                    <div class="col-2  pr-2">
                        <ul>
                            <li>
                                <a href="https://www.instagram.com/?hl=es-la" target="_blank">
                                    <img src="img/ig.png" alt="Instagram">
                                </a>
                            </li>
                        </ul>
                    </div>
               
           </div>
            </div>
           <div class=" col-md-6 col-11  text-md-left text-center ml-md-0 ml-4">
            <aside class="col-lg-10">

                <h3 class="text-center mt-5">¡Contactanos!</h3>
                
                <form action="enviar_formulario.php" method="post" enctype="multipart/form-data">
                    <div class="form-group">
                        <label for="nombre">Nombre</label>
                        <input type="text" class="form-control bordes" id="nombre" placeholder="Nombre..." name="nombre">
                    </div>
                       

                    <div class="form-group">
                        <label for="mail">Email</label>
                        <input type="email" class="form-control bordes" id="mail" placeholder="email..."  name="mail">
                    </div>

                    <div class="form-group">
                        <label for="comentario">Consulta</label>
                        <textarea id="comentario" class="form-control bordes" cols="30" rows="5" name="comentario"></textarea>
                    </div>
                                    
                    <input type="reset" value="Borrar" class="btn boton1 borrar my-5">
                    <input type="submit" value="Enviar" class="btn boton2 enviar my-5">

                </form>
            </aside>
        </div>
        </div>
        
    </section>
    
     <footer class="opacity p-3 text-center" >
        
       <p class="bold"> Diseño y Programación web - DMM3A - 2019</p>
        
    </footer>
</body>
</html>