Vue：使用新的图像/转换指令预加载图像到 Methode

问题描述

看起来很简单，但不知为何我没能完成。

我想在我的 nuxt 应用程序中预加载图像，就像在这个 Codepen 中一样，但不是作为指令，因为我只在一个组件中使用它。

效果很好，就像在图片标签中一样。

<img
  v-img-preloader="require(`@/assets/img/placeholder.png`)"
  v-if="lastimage"
  v-lazy="longUrlWithStuff"
  :alt="altTitle"
  :class="classNameInner"
/>

（指令 v-img-preloader 也在每个上。）

指令本身是：

Vue.directive('img-preloader',{
  bind: function (el,binding) {
    let img = new Image();
    img.src = binding.value;

    img.onload = function () {
      el.src = binding.value;
    }
  }
})

但是现在，我不知道如何将其转换为方法或挂载钩子。我更喜欢一种方法，但不知道如何以及如何为此元素传递“el”。 我看到了，那个 this fiddle 并像那里一样尝试，用一个安装的钩子，但卡住了......

  mounted() {
    let img = new Image();

    img.src = require(`@/assets/img/placeholder.png`);

    img.onload = () => {
      this.src = require(`@/assets/img/placeholder.png`);
    };
  },

如果有人知道我做错了什么，我很感激。 提前致谢。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）