gatsby-remark-images-medium-zoom 插件添加后无效的问题

标签：example   ack   path   src   对比测试   alt   log   import   content   

问题

想为 自己网站 的文章图片添加缩放的效果，于是选择使用 medium-zoom 这个插件。

我网站用的 Gatsby 正好也有对应的插件 gatsby-remark-images-medium-zoom，但是根据文档配置好之后发现并没有效果，也就是点击图片没有反应，看控制台也没有任何的报错。

原因

这是因为 Markdown 文件中的图片使用了 URL 的形式（https://example.com/123.jpg 这样的），并没有使用本地的图片文件。

但是 Gatsby 使用的 GraphQL 是基于本地文件的，所以 gatsby-remark-images 这个插件就无法处理这些图片。

而 gatsby-remark-images-medium-zoom 这个插件需要靠前者来提供要绑定的图片元素。

因此没有图片被处理，也就意味着没有图片被绑定，也就是没有添加上缩放效果的原因。

解决方案

不使用 Gatsby 的插件，选择手动安装 medium-zoom，然后在 gatsby-browser.js 中手动选择要优化的图片。

npm i medium-zoom

// gatsby-browser.js
import mediumZoom from "medium-zoom"

const onRouteUpdate = ({ location, prevLocation }) => {
  // 排除同一页面仅 Hash 发生变化的情况（可以理解成 只有页面发生跳转时 执行）
  if (!prevLocation || location.pathname !== prevLocation.pathname) {
    // 这里我只对文章页面的图片使用这个插件
    if (location.pathname.startsWith("/article/")) {
      // DOM 加载需要时间，因此要延迟一点点再去选择图片
      setTimeout(() => {

        // 绑定要缩放的图片元素
        mediumZoom(document.querySelectorAll("img"), {
          background: "rgba(0, 0, 0, .8)",
        })

      }, 300)
    }
    // ...
}

export { onRouteUpdate }

查找原因

查找 node_modules 中 gatsby-remark-images-medium-zoom 这个包的 源文件 可以发现，这个插件是根据图片的 class 来进行绑定的，绑定的 class 为 gatsby-resp-image-image。

但是在控制台中，选择图片，我们可以发现图片元素并没有 class，这说明是 gatsby-remark-images 出现了问题。

经过对比测试 CodeSandbox，可以看出来，远程图片确实无法运行这个插件，而本地图片可以。

在经过上网查找后，我发现有一个文章提到了这个问题 node.js - Why doesn‘t the image from the external link work in gatsby? - Stack Overflow。

所以比较可行的解决方案就是不使用 Gatsby 的插件，自己用 medium-zoom 配合 gatsby-browser.js 手动绑定一下图片。

插件效果

gatsby-remark-images-medium-zoom 插件添加后无效的问题

标签：example   ack   path   src   对比测试   alt   log   import   content   

原文地址：https://www.cnblogs.com/liangfengning/p/14319692.html