如何在HTML中渲染php-noise API返回的图片数据？

我是编程新手，正在开发一个项目，需要实现用户设置参数后渲染带emoji的背景图的功能，目前在处理背景图环节遇到了问题：

用户输入参数后，程序已拼接好API链接并调用php-noise API，控制台返回状态码200的响应：

{type: 'cors', url: 'https://php-noise.com/noise.php?r=15&g=15&b=15&tiles=15&tileSize=15&json', redirected: false, status: 200, ok: true, …}body: (...)bodyUsed: trueheaders: Headers {}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"[[Prototype]]: Response

直接在浏览器访问该API链接会返回我需要的图片地址：

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

我需要把这张图片渲染到页面的HTML元素中，但不清楚后续操作。以下是当前代码：

JavaScript代码 #

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>

你的代码存在两个关键问题，修正后即可实现图片渲染：

1. fetch的第二个then未定义回调函数：仅写了.then但未传入处理返回JSON数据的函数，导致无法获取API返回的图片URI。
2. 错误访问backgroundApi.uri：backgroundApi是拼接的API请求地址字符串，不存在uri属性，uri是API返回JSON数据中的字段。

修改后的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(function(data) {
    // 将返回的图片URI设置到img元素的src属性
    image.attr('src', data.uri);
    // 若需在容器中显示URI文本，可保留此行
    // genResults.text(data.uri);
  })
  .catch(function(error) {
    // 捕获请求错误，便于调试
    console.error('请求出错:', error);
  })
  
  getEmojiApi();
  generateParameters();
};

关键说明： #

• 第二个then接收API返回的JSON数据（变量data），data.uri即为图片的完整地址。
• 使用jQuery的attr方法为#imageResults元素设置src属性，浏览器会自动加载并显示图片。
• 添加catch块可捕获请求或解析过程中的错误，帮助排查问题。

修改完成后，用户点击按钮即可正确获取图片地址并渲染到页面中。

内容的提问来源于stack exchange，提问作者Ryan Caltabiano