Question

我正在尝试通过变量名称＆＃39; fileName＆＃39;设置图像源。我只知道文件名，不知道扩展名。扩展可能是.jpg，.png，.bmp等。我如何实现不同的扩展？这是我的.jpg扩展代码。

 '<img src="../assets/images/logos/' + fileName + '.jpg" width="60" height="40">' +

Answer 1

在不知道扩展名的情况下，您只能使用多个请求或使用php。

JS：

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

PHP：调用Php文件并使用glob（）查找扩展名为

的文件

//Name php file something like: "findExtension.php"
//In Js define the src to the phpfile and add the filename as Get parameter
<img src="findExtension.php?filename=pictureXYZ">

$filename = $_GET['filename'];
$result = glob ("./pictures/" . $filename . ".*");
if (!empty($result)) {
    header("Location: /pictures/" . basename($result[0]));
} else {
    //File does not exists
}

我认为JS中没有像glob（）这样的函数。这是基于js的性质，它不能直接使用服务器上的文件系统。如果您将node.js用作后端，则会有所不同。然后这很容易做到。

Answer 2

使用onerror尝试不同的可能性。以下示例以＆＃34; filename.jpg＆＃34;开头。然后尝试＆＃34; filename.png＆＃34;。

<img
    src="../assets/images/logos/filename.jpg"
    onerror="this.onerror=null;this.src='../assets/images/logos/filename.png'"

    width="60"
    height="40"
/>

如何包含只知道名称而不是扩展名的图像文件？

2 个答案: