Question

我正在尝试在Handlebars中创建一个帮助程序，允许我确定图像是否已成功加载，否则，我将其替换为另一个。这一切都是因为我使用的是API，在某些情况下，此API会返回一些不存在的图像URL，即“404”。

在搜索stackoverflow之后，我找到了一些解决方案并尝试将其作为Handlebars帮助程序合并。当我试图将它从控制台中取出时，这个函数似乎工作中途但是当我尝试将它返回到Handlebars模板时，它返回一个“未定义”：

Handlebars.registerHelper('imagefix', function(imagesrc){
    var img = new Image();
    var url = imagesrc;
    img.onerror = function(){
        //return console.log(img.src); -- This response works fine
        img.src = "http://example.com/Bugs-main1.jpg";
        return img.src; //Here it is failing
    };
    img.src = url;
});

这是我的模板：

<script id="template" type="text/x-handlebars-template">
    <ul class="arts">
      {{#each objects}}
      <li class="i"><a class="i" href="http://localhost/foo/index.php?q={{slugifyx artistName}}"><img class="chkimg" alt="{{artistName}}" src="{{imagefix image}}"><span>{{artistName}}</span></a></li>
      {{/each}}
    </ul>
</script>

Answer 1

您需要处理异步代码

npm install handlebars-async

var Handlebars = require('handlebars');
var handlebarsAsync = require('handlebars-async');

handlebarsAsync(Handlebars);

Handlebars.registerHelper('imagefix', function(imagesrc) {
  var done = this.async();
    var img = new Image();
   var url = imagesrc;
  img.onerror = function(){
        //return console.log(img.src); -- This response works fine
        img.src = "http://example.com/Bugs-main1.jpg";
        done(img.src); //Here it is failing
    };
    image.onload = function() {
      done(img.src);
    }
    img.src = url;
});

这样的事情可以帮到你

检查图像是否已加载

1 个答案: