首页 > 解决方案 > 在从获取的图像中创建元素上设置 src 属性

问题描述

我从一个名为 Randomuser 的 API 中获取数据,该 API 传递包含图像的随机用户。我选择了 5 个随机用户的姓名和电话号码。

包含图像,但图像是必须随机化的相同图像。

任何随机化图像的方法?

我的代码:

fetch('https://randomuser.me/api/?results=5&nat=us').then(response => {
return response.json();
}).then(responseJson => {
  responseJson.results
  console.log(responseJson);

  for (const user of responseJson.results) {
    const img = document.createElement("IMG");
    img.innertext = user.picture.medium;
    -- > img.setAttribute("src", "img.setAttribute("
      src ", "
      https: //randomuser.me/api/portraits/thumb/men/5.jpg")")
      img.setAttribute("width", "50"); img.setAttribute("height", "50"); img.setAttribute("alt", ""); document.body.appendChild(img)

      console.log(user);
    }
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

标签: javascriptapi

解决方案


你必须更换:

img.setAttribute("src", "img.setAttribute("src", 

" https://randomuser.me/api/portraits/thumb/men/5.jpg ")")

经过 :

img.setAttribute("src", user.picture.medium);

示例:

$.get('https://randomuser.me/api/?results=5&nat=us', function(responseJson) {
  for (const user of responseJson.results) {
    const img = document.createElement("IMG");

    img.innertext = user.picture.medium;
    img.setAttribute("src", user.picture.medium);
    img.setAttribute("width", "50");
    img.setAttribute("height", "50");
    img.setAttribute("alt", "");

    document.body.appendChild(img);
  }
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


推荐阅读