[youzan/vant]vant4.x van-image Lazyload 不能正确加载图片

9

import { Lazyload } from 'vant';
app.use(Lazyload);

加上试试

inottn

1

@inottn

lixiaofa

9

且代码检查也过不了

lixiaofa

9

https://codesandbox.io/s/vant-4-issue-template-forked-pbef3p

inottn

2

我不明白为什么要写两遍 ， 这不是bug吗 @inottn

lixiaofa

6

由于 Lazyload 组件在注册时可以传入一些配置项，所以我们不会自动注册 Lazyload 组件，需要手动进行注册

inottn

8

局部注册也不行

https://codesandbox.io/s/vant-4-issue-template-forked-6gi99s @inottn 我应该怎么用这个组件，局部注册

lixiaofa

5

你应该是写错了指令。v-lazy 指令可用。

vant lazyload 官方文档

我曾经写过一篇源码文章，也可供参考。 vant4.0 正式发布了，分析其源码学会用 vue3 写一个图片懒加载组件！

ruochuan12

7

你是说文档写错了吗 @lxchuan12 @inottn

lixiaofa

4

你也确定不了 img 组件应用了 lazy-load @lxchuan12

lixiaofa

1

文档没写错，初步发现是image组件中的代码v-lazy （jsx）Image.tsx#L167 写法不支持导致的，正确写法应该是babel-plugin-jsx#custom-directive。有空我继续看下如何修复~

ruochuan12

2

我是该写 lazy-load 还是v-lazy

v-lazy 是没有应用 lazy-load 的 @lxchuan12

lixiaofa

0

先不写吧，或者你用 img v-lazy 来替代 van-image

ruochuan12