<viewer :images="this.awardData.files">
          <img v-for="src in this.awardData.files" :src="'src'" :key="src">
        </viewer>

Hey, above is my code. I tried using component method. But nothing is shown in the browser.

Is that I should use directive method also or any of the methods(component, directives) is fine?

给viewer设置容器, 并在容器外放置一个兄弟元素。 兄弟元素显示内容为vue data中的数据初始值为空对象。 在viewed()方法中获取图片数据对数据赋值时viewer预览图像发生了闪退, 浏览器中的元素也消失了。 附在线链接https://codepen.io/aohongjie/pen/vYdRdaJ

I am finding then if my gallery a single image that is unavailable (due to 403 or 404 error when the browser attempts to load it), the entire viewer will not function.

Is this intentional? Is there a way to handle these errors gracefully so the viewer will still work for the other images?

I am using viewer with the inline option and it simply never appears if there is an error loading one out of 200 images.

Currently, <viewer> component takes the non-optional images attribute but then does nothing good with it (in particular, it does not render images from it). This is not only useless but deceitful.

For example:

  <viewer :images="images">
    <!-- images is ignored! -->
    <img src="https://picsum.photos/200/200">
    <img src="https://picsum.photos/300/200">
    <img src="https://picsum.photos/250/200">
  </viewer>

Whatever is passed to images is not used, although it is required to pass an Array value there.

images will be passed as a slot scope argument however this serves no purpose either, because the slot code has direct access to containing component data, for example:

<template>
  <viewer>
    <slot>
      <!-- no need to pull images from slot scope, it is already available: -->
      <img v-for="image in images" :src="image">
    </slot>
  </viewer>
</template>

<script>
export default {
  data () {
    return {
      images: [ ... ]
    }
  }
}
</script>

Codepen demonstrating both problems: https://codepen.io/ilya-semenov/pen/KRKXLv

This PR removes image attribute. It also replaces scope with slot-scope in the example, as the former is deprecated in Vue 2.5.

你好，感谢作者提供的插件之前我也一直在使用。

周末准备用 Vue3 重构的此项目，重构完之后发现您已在 cli3 分支开发（还以为是脚手架呢，就没注意）。本来不打算写了，我看了您的实现方式思路和我不太一样，觉得可以讨论一下比较好的方案。

完整的代码地址

https://github.com/haiweilian/v-viewer/tree/next

删除指令的功能

我不太清楚作者之前是什么原因添加指令功能的，使用指令监听子元素的变化的方式会造成很多意外的问题，我也没再使用。在现在的版本有些不方便的是，不能自定义标签名、或者有时造成多余的层级嵌套、没有 API 调用的方式。

我想有其他的办法可以解决，比如指令使用 v-is，它也会保留原始标签的属性。

<section v-is="'viewer'" :images="reactiveImages.asyncImages">
  <img v-for="item of reactiveImages.asyncImages" :key="item" :src="item" width="200" height="200" />
</section>

组件使用函数

使用 render 函数，控制标签的标签名添加 tag 属性实现、还比较容易扩展。

return () =>
  h(props.tag, { ref: $root }, slots.default && slots.default({ ...props })
);

这将渲染 section 标签。

<viewer tag="section">
  <img v-for="item of reactiveImages.syncImages" :key="item" :src="item" width="200" height="200" />
</viewer>

API 调用的方式

使用 API 的方式，会很方便的处理某些问题，比如点击一个按钮然后预览图片，之前使用图片隐藏的方式太过麻烦也不太优雅。

期望调用方式如下，然后返回组件实例。

viewerInstance = ViewerPreview({
  images: Images,
  options: Options,
});

nextTick(() => {
  viewerInstance.$viewer().view(1);
});

用 render 函数去渲染 component 组件，再返回组件实例。

function ViewerPreview(options: ViewerPreviewOptions) {
  // ....
  const vm = h(
    ViewerComponent,
    options,
    options.images.map((src) => {
      return typeof src === "string"
        ? h("img", { src })
        : h("img", { src: src.src });
    })
  );
  // ...
}

整体的方案

我还没有做过多的测试，或者是否有其他更好的方式去实现。如果觉得可行，我将提交一个新分支。

Uncaught (in promise) TypeError: Cannot read property '_c' of undefined at Proxy.render (v-viewer.js?6944:583) at renderComponentRoot (runtime-core.esm-bundler.js?5c40:732) at componentEffect (runtime-core.esm-bundler.js?5c40:4225) at reactiveEffect (reactivity.esm-bundler.js?a1e9:42) at effect (reactivity.esm-bundler.js?a1e9:17) at setupRenderEffect (runtime-core.esm-bundler.js?5c40:4208) at mountComponent (runtime-core.esm-bundler.js?5c40:4167) at processComponent (runtime-core.esm-bundler.js?5c40:4127) at patch (runtime-core.esm-bundler.js?5c40:3745) at mountChildren (runtime-core.esm-bundler.js?5c40:3927)

• [ ]

esbuild 中配置了 pure, 移除了所有 console.log 后, 会出现错误信息:

Uncaught SyntaxError: Unexpected token '...'

找到原因，是因为这个文件 https://github.com/mirari/v-viewer/blob/v3/src/directive.ts 98行 log 方法里 console.log(...args), 被 esbuild 去除了 console.log 后, 代码变成了:

debug && ...args

有什么办法能解决这个问题呢?