jQuery 图片错误 - 如果原始图片不存在则显示不同的图片（Bootstrap 文件输入）

Question

我正在使用 (Bootstrap File Input) 组件上传文件，这非常有效。我已经定义了 initialPreviewConfig 来显示服务器上的现有图像，但有时给定用户没有文件, 所以我需要显示另一张图片，通常在 HTML 中我会用下面的 onerror 来做，但这不起作用，适当的是因为我不够聪明，无法找到正确的数字或 " & ' (尝试了很多！）..但是 maeby 因为这在 JS 中不起作用..任何人都可以帮我找到解决方案吗？

下面JS中我试过的错误：

onerror="this.src='https://example.com/img/missing.jpg'"

我的来源：

$("#input-fas").fileinput({
    theme: "fas",
    uploadUrl: "/file-upload-batch/2",
    allowedFileExtensions: ['jpg'],
    overwriteInitial: false,
    maxFileSize:2000,
    maxFilesNum: 1,
    language: "da",
    initialPreview: [
    "<img src='/profile_pictures/web/<%=Request.QueryString("initials")%>.jpg' class='file-preview-image' alt='Nuværende' title='Nuværende' onerror='this.src=''https://example.com/img/missing.jpg'' style='width: 75%'>",  
],
// initial preview configuration
initialPreviewConfig: [
    {
        caption: 'Nuværende (<%=Request.QueryString("initials")%>.jpg)', 
        width: '120px', 
        frameAttr: {
            title: 'Nuværende',
        },
    }
],
    slugCallback: function (filename) {
        return filename.replace('(', '_').replace(']', '_');
    },
});

<div style="width: 550px;">
    <input id="input-fas" name="input-fas[]" type="file" multiple>
</div>

Answer 1

看来你应该先检查文件是否存在，如果不存在则使用默认路径。我在这里用 JSP（？我猜，你没有标记你的后端语言）离开了我的操舵室，但我找到了 this 并试图让它适应你的需要。这在逻辑上是合理的，但我不知道它是否有效，也没有办法测试它。

ServletContext app = getServletContext();
String path1 = app.getRealPath("/profile_pictures/web/<%=Request.QueryString("initials")%>.jpg");
File theImage1 = new File(path1);

String imageURL1 = "https://example.com/img/missing.jpg";

if(theImage1.exists())
{
    imageURL1 = "/profile_pictures/web/<%=Request.QueryString("initials")%>.jpg";
}

...

initialPreview: [
    "<img src='<%=imageURL1%>' class='file-preview-image' alt='Nuværende' title='Nuværende' style='width: 75%'>",  
],

Answer 2

在@Arleigh Hix 的 postet 示例之后，虽然该脚本是 JSP 而不是 ASP，但他的逻辑让我开始思考..所以我最终使用了文件系统对象和结果您在下面看到的工作代码：

Dim ProfileImage, path, fso

path = "img/profile_pictures/web/" & Request.Querystring("initials") & ".jpg"

Set fso = CreateObject("Scripting.FileSystemObject")

If fso.FileExists(Server.MapPath(path)) Then
   ProfileImage = path
Else
   ProfileImage = "img/profile_pictures/web/missing.jpg"
End If

Set fso = Nothing

jQuery 图片错误 - 如果原始图片不存在则显示不同的图片（Bootstrap 文件输入）

jQuery on image error - show different image if original does not exist (Bootstrap File Input)

javascript

jquery

asp-classic

bootstrap-4