Javascript 记忆游戏获取网格中显示的图片以正确显示

我在这里遵循指南： 我是在第一步中添加图像并将其放入网格。 请参阅下面的代码。但是，当您在web浏览器上加载index.html页面时，它是空白的。 我没有看到任何控制台错误，当您检查网格元素时，您会看到：

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

---

错误似乎存在于

样式中。您在图像源周围使用了
”
（双引号），而应该使用
”

在评论中添加了所有css，对我来说效果很好。我刚刚将图像路径从img更改为source（）。所以我猜这就是你的图像路径的问题


const cardsArray=[{
'名称'：'外壳'，
“img”：“img/blueshell.png”，
},
{
'名称'：'星'，
“img”：“img/star.png”，
},
{
“name”：“bobomb”，
“img”：“img/bobomb.png”，
},
{
“姓名”：“马里奥”，
“img”：“img/mario.png”，
},
{
“姓名”：“路易吉”，
“img”：“img/luigi.png”，
},
{
“name”：“peach”，
“img”：“img/peach.png”，
},
{
“名称”：“1up”，
“img”：“img/1up.png”，
},
{
'名称'：'蘑菇'，
“img”：“img/mustum.png”，
},
{
'name'：'thwomp'，
“img”：“img/thwomp.png”，
}];
/*我使用的是来自srouce的图像*/
var base=https://taniarascia.github.io/memory/';
const game=document.getElementById（'game'）；
const grid=document.createElement（'section'）；
setAttribute（'class'，'grid'）；
游戏。附加子对象（网格）；
cardsArray.forEach（项目=>{
const card=document.createElement（'div'）；
card.classList.add（'card'）；
card.dataset.name=item.name；
card.style.backgroundImage=`url（${base+item.img}）`；
子网格（卡片）；
});
.grid{max width:960px；边距：0自动；显示：flex；flex wrap:wrap；对齐内容：间距；}
.card{边距：5px；背景颜色：6589F9；背景大小：包含；背景重复：不重复；背景位置：中心；高度：150px；宽度：150px；}

Hi no，它们位于img文件夹中。在浏览器中启动index.html时。您可以进入img文件夹并正确查看图像。是否定义了卡类的宽度和高度？@Rahul是根文件夹是memory folder->index.html在其中。img文件夹在内存中folder@bowl_of_rice如果不定义div width和height，则根据在本例中为none的内容，div width/height将为0。div不知道背景图像的大小或类似的东西，你需要设置它。@bowl_of_rice，好的，那么你在哪里定义了
grid
类？这部分应该创建div，而网格我不应该手动创建它。cardsaray.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）；}）；我可以在web浏览器中加载index.html并检查元素，然后从该页面获取要在浏览器中显示的图像，尽管您一定遇到了一些CSS问题。你能添加你所有的CSS吗？顺便说一下，我不是手动添加任何div。我刚刚在您编写
const game=document.getElementById（'game'）时添加了带有
game
id的div在javascriptYou是对的，我的css链接错了：改为，现在图像显示出来了。
      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; 


            }

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