如何在不知道Javascript中的文件扩展名的情况下设置img src？

Question

我有一个空的img标签:

<img src="">

然后src应该用Javascript设置,但我只知道图像的名称,而不是扩展名.

这不起作用:

document.querySelector("img").src = "img/image1";

所以我想知道是否有办法设置src而不指定扩展名.

提前致谢.

Answer 1

如果您在服务器上运行了脚本语言,则可以在那里运行脚本,在图像目录中搜索具有任何扩展名的名称.您将srcURL 设置为指向脚本,服务器可以搜索该文件并发送重定向.

document.querySelector("img").src = "find_image.php?name=image1";

find_image.php 会是这样的:

<?php
$name = $_GET['name'];
$files = glob($_SERVER['DOCUMENT_ROOT'] . "/img/" . $name . ".*");
if (!empty($files)) {
    header("Location: /img/" . basename($files[0]));
} else {
    // Redirect to a default image if the file can't be found
    header("Location: /img/default.gif");
}

如果你知道扩展是一个有限的集合,这是在客户端上执行它的一种方法.onerror如果前一个失败,它使用图像的属性来尝试不同的扩展.

function tryImages(img, name) {
    img.src = "img/" + name ".jpg";
    img.onerror = function() {
        img.src = "img/" + name ".png";
        img.onerror = function() {
            img.src = "img/" + name ".gif";
        };
    };
tryImages(document.querySelector("img"), "image1");