如何解决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 举报,一经查实,本站将立刻删除。