Javascript 有没有一种方法可以包含“的”图像；mp4“；及；webM"；从api调用格式化？

大家早上好

我目前正在访问一个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);

---

您创建了

元素，但没有将其与URL关联。您将如何创建该元素？你能给我举个例子吗？太好了！非常感谢你。它现在正在显示mp4图片和Webm。关于改进此代码以显示图像有何建议？这样，无论文件是“img”、“webM”还是“mp4”，它都会替换该文件。

const current\u image=document.getElementById（img.id）；if（当前_映像）{document.body.replaceChild（img，当前_映像）；}else{document.body.appendChild（img）；}}