Question

大家早上好！

我当前正在访问一个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文件。

Answer 1

您未将video元素与视频源相关联。

因此，在将元素附加到DOM之前，您需要添加src：

        let video = document.createElement("video");
        video.src = src;
        document.body.append(video);

是否可以通过api调用包含“ mp4”和“ webM”格式的图像？

1 个答案: