Question

我讨厌问一个问题，我相信SO已经以某种方式解决了这个问题，但是我没有找到足够的有关如何执行此操作的说明。

我想渲染一个ID为'gulp'的图像。我不确定如何执行此操作。

我正在学习如何使用访存进行API调用（过去5个小时，我一直在完成一些不同的任务）。

感谢您抽出宝贵的时间阅读。

codepen： https://codepen.io/matthew-palmer/pen/ZEzXaOd

我不确定该怎么做，但是尝试使用innerHTML和textContent。我也看到了一些引用setAttribute的示例。

<body> 
  <div>
    <img src='' 
         id='gulp' 
         alt='randomdrink'>
  </div>
</body>

const drink = document.querySelector('#gulp').src

fetch('https://www.thecocktaildb.com/api/json/v1/1/random.php')
    .then(response => {return response.json()
    }).then(response => 
          drink.textContent = response.drinks[0].strDrinkThumb)

#gulp {
  text-align:center;
  outline: deeppink solid 2px;
  margin-left: 48%;
  margin-top: 2%;
}

我希望图像显示在页面上。我已经获得了过去显示的网址，但没有显示图片。

Answer 1

您不能以这种方式设置图像的src，因为src是属性。

尝试一下：

const gulp = document.querySelector('#gulp')

fetch('https://www.thecocktaildb.com/api/json/v1/1/random.php')
    .then(response => {return response.json()
    }).then(response => 
          gulp.src = response.drinks[0].strDrinkThumb)

如何使用javascript通过此api调用使图像显示在dom上？

1 个答案: