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

Question

I am trying to set an image source by a variable name 'fileName'. I only know file name and don't know extensions. extensions may be .jpg, .png, .bmp etc. How i can achieve for different extensions? Here is my code for .jpg extension.

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

Answer 1

Without knowing the extension you can only do it with multiple requests or with 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: Call a Php file and use glob() to find the file with its extension

//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
}

I dont think there is any function like glob() in JS. This is based on the nature of js it cant directly work with the filesystem on the server. It would be different if your using node.js as backend. Then this could be easily done.

Answer 2

Use onerror to try different possibilities. The example below starts with "filename.jpg" then tries "filename.png".

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

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