如何在 HTML 中呈现 API 图像数据

Question

我是编码新手，我正在为一个项目从事此工作，需要一些指导。我尝试在网上寻找答案，但它们似乎都以不同的方式编写或 API 函数不同等。对于我的项目，用户设置参数以便使用表情符号渲染背景图像。目前我正在处理背景图像部分，但我不知道如何继续。我的问题是在他们插入参数后，它完成链接并访问 API(phpnoise)。我让它在控制台中记录响应，这给了我一系列数据：

{type: 'cors', url: 'https://php-noise.com/noise.php?r=15&g=15&b=15&tiles=15&tileSize=15&json', 重定向: false, 状态: 200, ok: true, …}body: (...)bodyUsed: trueheaders: 标头{}ok: trueredirected: falsestatus: 200statusText: "OK"type: "cors"url: "https://php-noise.com/noise.php?r =15&g=15&b=15&tiles=15&tileSize=15&json"[[原型]]：响应

哇哦！但问题是我不知道如何从这里开始。如果我在浏览器中访问该链接，它会为我提供：

{ “uri”：“https://php-noise.com/images/noise_r15-g15-b15-t15-tS15-bW0-mB-mu1.5-st5_e6054205e2a73c137a3222bb29ef011d.png” }

这是生成的结果和我希望实际提供给我的页面上的容器的图像。有人可以帮我弄清楚如何让它显示在 HTML 元素中吗？这是我到目前为止的代码：

var genButton = $("#genBtn");
var image = $("#imageResults")
var tiles = $('#parameter1');
var tileSize = $('#parameter2');
var genResults = $('#genResults');
var red = $('#parameter3');
var blue = $('#parameter4');
var green = $('#parameter5');
var numTiles = $('#parameter1');
var tSize = $('#parameter2');

genButton.on('click', getApi);

function getApi(event) {
 event.preventDefault()
  var r = red.val();
  var b = blue.val();
  var g = green.val();
  var tiles = numTiles.val();
  var tileSize = tSize.val();
  var backgroundApi = `https://php-noise.com/noise.php?r=${r}&g=${g}&b=${b}&tiles=${tiles}&tileSize=${tileSize}&json`;
  
  
  
  fetch(backgroundApi)
  .then(function (response) {
    console.log(response.status)
    console.log(response)
    return response.json();
  })
  .then
  genResults.textContent=backgroundApi.uri
  
  
  getEmojiApi();
  generateParameters();
};

这是我要渲染图像的 HTML 部分：

               <!-- Image Container -->
                <div class="column is-flex is-flex-direction-column is-align-items-center">
                    <div id="genResults">
                        <img id="imageResults">
                    </div>

谢谢！

Answer 1

您可以使用 URL 来设置

src

元素的

<img>

属性。方法是这样的：

在你的 JavaScript 中：

fetch(backgroundApi)
.then(function (response) {
    console.log(response.status);
    return response.json();
  })
.then(function (data) {
    // Assuming data.uri contains the image URL
    var imageResults = document.getElementById('imageResults');
    imageResults.src = data.uri;
  })
.catch(function (error) {
    console.error('Error:', error);
  });
getEmojiApi();
generateParameters();