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

afdcj2ne  于 2023-10-17  发布在  jQuery
关注(0)|答案(1)|浏览(130)

我是新的编码,我正在为一个项目,需要一些方向。我试着在网上寻找我的答案,但他们似乎都是不同的书面或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:(...)body Used:真实标题:标题{}正常:trueredirected:虚假状态:200状态文本:“OK“type:“cors“url:“https://php-noise.com/noise.php?r=15&g=15&b=15&tiles=15&tileSize=15&json“Prototype:响应
我不知道该怎么办,我也不知道该怎么办。如果我在浏览器中访问该链接,它会为我提供:
{
“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>
8dtrkrch

8dtrkrch1#

您可以使用URL设置<img>元素的src属性。这是如何:
在您的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();

相关问题