Question

我有一个空的img标签：

<img src="">

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

这不会起作用：

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

所以我想知道是否有办法在没有指定的情况下设置src 扩展名。

提前致谢。

Answer 1

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

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");

Answer 2

无论您的src属性是什么，浏览器都会从服务器请求。如果您将服务器配置为以某种方式使用默认扩展，那么它是可能的。但是，明确你要求的内容总是更好。

在任何情况下，如果您想要动态地向页面添加图像，请不要添加错误的标记。即时创建元素。

var image = document.createElement('img');
image.alt = 'This is a river.'; // alt is required per HTML spec
image.src = 'your/image/location';
document.body.appendChild(image); // or wherever you want it

Answer 3

/ IMG / image1的。* /

正则表达式是您需要的

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions

但是在后端（你用的是什么语言？PHP，Javascript，ruby？）...不是前端的javascript。

Answer 4

您可以检查所有文件类型，并查看onerror事件。像这样：

var image = document.createElement("IMG");
image.src = "myfile.jpg";
document.appendChild(image);

for(var i = 0; i<2; i++){
 image.onerror = function(){
  if(image.src == "myfile.jpg"){
   image.src = "myfile.png";
  }else if(image.src == "myfile.png"){
   image.src = "myfile.gif";
  }
}

Answer 5

如果你已经使用JS ..检查图像的扩展名并添加它：

checkImgExtension(img)
{
    // Was not your question ;-)
}

var img1 = "img/image1";

var src = checkImgExtension(img1 );

document.querySelector("img").src = img1 + src;

EDITED！

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

5 个答案: