memory game getting pictures that are displayed in grids to show correctly

Question

I am following the guide here: https://www.taniarascia.com/how-to-create-a-memory-game-super-mario-with-plain-javascript/ I was on the first step where you add the images and get them into a grid. Please see code below. However when you load the index.html page on a web browser it's blank. I'm not seeing any console errors and when you inspect the element for the grid you see:

    <div class="card" data-name="star" style="background-image: 
    url("img/star.png");"></div>

which is supposed to be correct. Any help would be greatly appreciated!

      const cardsArray = [{
      'name': 'shell',
     'img': 'img/blueshell.png',
      },
      {
       'name': 'star',
      'img': 'img/star.png',
      },
      {
     'name': 'bobomb',
     'img': 'img/bobomb.png',
      },
      {
     'name': 'mario',
     'img': 'img/mario.png',
      },
      {
      'name': 'luigi',
      'img': 'img/luigi.png',
       },
       {
      'name': 'peach',
      'img': 'img/peach.png',
       },
       {
      'name': '1up',
      'img': 'img/1up.png',
      },
      {
       'name': 'mushroom',
       'img': 'img/mushroom.png',
        },
        {
       'name': 'thwomp',
      'img': 'img/thwomp.png',
       }];
       const game = document.getElementById('game');
      const grid = document.createElement('section');
      grid.setAttribute('class', 'grid');
      game.appendChild(grid);

      cardsArray.forEach(item => {
      const card = document.createElement('div');
      card.classList.add('card');
      card.dataset.name = item.name;
      card.style.backgroundImage = `url(${item.img})`;
      grid.appendChild(card);
       });


        body {
           margin: 20px 0;
           background: #6589F9;
            }

         .grid {
            max-width: 960px;
            margin: 0 auto;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-evenly;

            }

          .card {
            margin: 5px;
            background-color: #6589F9;
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center center;
            height: 150px;
            width: 150px; 


            }

Answer 1

With all your css you have added in comment, its working fine for me. I have just changed the image path from img to source (https://taniarascia.github.io/memory/img). So I am guessing its the problem with your image path.

const cardsArray = [{
      'name': 'shell',
     'img': 'img/blueshell.png',
      },
      {
       'name': 'star',
      'img': 'img/star.png',
      },
      {
     'name': 'bobomb',
     'img': 'img/bobomb.png',
      },
      {
     'name': 'mario',
     'img': 'img/mario.png',
      },
      {
      'name': 'luigi',
      'img': 'img/luigi.png',
       },
       {
      'name': 'peach',
      'img': 'img/peach.png',
       },
       {
      'name': '1up',
      'img': 'img/1up.png',
      },
      {
       'name': 'mushroom',
       'img': 'img/mushroom.png',
        },
        {
       'name': 'thwomp',
      'img': 'img/thwomp.png',
       }];
       
       /* I am using image from the srouce */
       var base = 'https://taniarascia.github.io/memory/';
       
       
       const game = document.getElementById('game');
      const grid = document.createElement('section');
      grid.setAttribute('class', 'grid');
      game.appendChild(grid);

      cardsArray.forEach(item => {
      const card = document.createElement('div');
      card.classList.add('card');
      card.dataset.name = item.name;
      card.style.backgroundImage = `url(${base + item.img})`;
      grid.appendChild(card);
       });

.grid { max-width: 960px; margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: space-between; }

.card { margin: 5px; background-color: #6589F9; background-size: contain; background-repeat: no-repeat; background-position: center center; height: 150px; width: 150px; } 

<div class="card" data-name="star" style="background-image: 
    url('https://taniarascia.github.io/memory/img/star.png');"></div>
<div id="game">

</div>

You can also test it here.. https://jsfiddle.net/nimittshah/ovqj9wsa/3/

Answer 2

The error seems to be there in your style property. You had used "" (double quotes) around image source, instead you should use ''.

<div class="card" data-name="star" style="background-image: url('img/star.png');"></div>