I've been working on a web app that uses GIPHY API for searching and displaying GIFS. The app is working fine but I have a problem: when downloading any of the GIFs displayed, the filename is always the same: "200.gif"
I want to change that file name. I tried inserting the container inside of a container and using the <download="filename"> but I think that this doesn't work with URL src images.
I read something about using Blob files but I failed every attempt of doing that. Any help is appreciated, thanks!
Container of the GIFS in HTML:
<div class="result_box">
<span id="gif"></span>
</div>
JS function that displays the GIFS:
function pushToDOM(response) {
response = JSON.parse(response);
let container = document.getElementById("gif");
let images = response.data;
container.innerHTML = "";
var received_gifs = [];
console.time("Gifs recovery");
images.forEach(function (image) {
console.log("recovered gif from data");
let src = image.images.fixed_height.url;
let gif_temp = "<img src='" + src + "' class='container-image' />";
console.log(gif_temp);
received_gifs.push(gif_temp);
});
console.log("all gifs recovered");
console.timeEnd("Gifs recovery");
console.time("Gifs display");
for (let i = 0 ; i < received_gifs.length ; ++i) {
console.log("sending gif to container");
container.innerHTML += received_gifs[i];
}
console.log("all gifs sent to container");
console.timeEnd("Gifs display");
}
For anyone wondering, this is what the URLs of the GIFs looks like:
https://media4.giphy.com/media/26uTsIBMIJsaXM4qQ/200.gif?cid=e1bb72ffynzgixrj5ijk7u60fb06rc48fca39ne0tf9rdw2h&rid=200.gif&ct=g
Aucun commentaire:
Enregistrer un commentaire