如何从课程中加载默认图像

时间:2019-06-10 15:48:04

标签: javascript html css image handlebars.js

我在使用.hbs文件时设置了默认图片

<img src="{{source_image_number}}.png" alt={{source_image_number}} onerror="default_image.png">

,表示当加载源图像时出现问题时,可以加载默认图像,而不用带有一点破损的图像徽标(特别是对于Chrome)。现在,我使用来自第三方类的另一个图像作为默认图像。就像下面的css文件中一样:

.icon-default: { content: '\e050'; transform: translate(2px, 3.5px); }

我尝试了三种解决方案:

  • 创建一个包含必要信息的类<div class="default-image">。然后使用onerror="this.display='none'",然后再调用default-image类。此解决方案的问题是正确装入{{source_image_number}}.png时也会装入默认图像。

  • 在.js文件中使用jquery处理onerror情况。但是,当jquery检测到源图像问题并读取默认图像时,页面已完全加载。结果,同时出现了一些破损的图像徽标和默认图像。

  • 使用jquery在加载页面之前检查源图像是否存在。结束时,出现了一个未经身份验证的客户端读取文件问题(错误消息不完全是这个问题,但是在多次出现空错误之后,我认为是因为这个原因)。

我想到但尚未测试的第四种解决方案是使用代理进行身份验证,然后按照第三种解决方案中所述进行检查,但我犹豫是否有更简单的方法来做到这一点。

我应该怎么做才能将此图像设置为默认图像?

1 个答案:

答案 0 :(得分:0)

您尝试放置{{source_image_number}}而不是{source_image_number}吗?如果语法与车把有关,则变量应位于两个{{}}之间,而不是一个。

在此处查看语法http://handlebarsjs.com/