大家,早安!
我正在访问一个API来显示狗的随机图像。现在,它正在发挥作用;但是,该功能仅显示“.gif”或“.img”格式的图像。如果图像为“.mp4”或“WebM”格式,则该功能将不显示图像。
我试图创建一个if语句,允许我访问“.mp4”和“.WebM”图像,如果它们出现的话。从理论上讲,它是有效的。我已经使用.split来访问文件的最后一部分,无论是“.mp4”还是“WebM”,但是,与我最初需要做的事情相比,没有进行任何更改(这是显示图像,无论其文件类型如何)。我发布的代码就我所取得的进展而言。我一直坚持如何继续前进。
const userAction = async () => {
const response = await fetch('https://random.dog/woof.json');
const myJson = await response.json();
return myJson.url
};
function button() {
document.getElementById('btn').onclick = async function () {
const src = await userAction();
const img = document.createElement('img');
img.src = src;
img.width = 500;
img.height = 500;
img.alt = "doggo";
img.id = 'doggo_image';
let pieces = src.split(".");
// Need to figure this part out
if (pieces[pieces.length-1] === "mp4" || pieces[pieces.length-1] === "webM") {
let video = document.createElement("video");
document.body.append(video);
} else {
}
const current_image = document.getElementById(img.id);
if (current_image) {
document.body.replaceChild(img, current_image);
} else {
document.body.appendChild(img);
}
};
}
我期待代码打印图像,如果它是mp4,webM或img。现在,它目前只从api打印img文件。
您没有将视频元素与视频源相关联。
所以在将元素附加到DOM之前,需要添加src:
let video = document.createElement("video");
video.src = src;
document.body.append(video);