jQuery 图像错误 - 如果原始图像不存在则显示不同的图像（引导文件输入）答案

【问题标题】：jQuery on image error - show different image if original does not exist (Bootstrap File Input)jQuery 图像错误 - 如果原始图像不存在则显示不同的图像（引导文件输入）
【发布时间】：2021-03-30 12:50:12
【问题描述】：

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

我在下面的JS中尝试过的onerror：

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>

【问题讨论】：

标签： javascript jquery bootstrap-4 asp-classic

【解决方案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%'>",  
],

【讨论】：

谢谢@Arleigh Hix .. 虽然它是 ASP（活动服务器页面）而不是 JSP 帮助了我很多！ .. 你的代码示例因为它是 JSP 而不起作用，但这让我找到了正确的方法.. 我会用我的代码发布答案，但你应该得到积分 ;-)
好的，很好。我从未使用过任何一个，您应该将您的问题标记为 ASP。
是肯定的 :-D .. 我刚刚添加了 ASP Classic ;-)

【解决方案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

【讨论】：

你不需要Server.MapPath()他们吗？
@user692942 .. 你是对的，我刚刚用正确的代码更新了最后一个代码 - 谢谢。