gatsby-remark-images-medium-zoom 插件添加后无效的问题
问题
想为 自己网站 的文章图片添加缩放的效果，于是选择使用 medium-zoom 这个插件。
我网站用的 Gatsby 正好也有对应的插件 gatsby-remark-images-medium-zoom，但是根据文档配置好之后发现并没有效果，也就是点击图片没有反应，看控制台也没有任何的报错。
原因
这是因为 Markdown 文件中的图片使用了 URL 的形式（https://example.org/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 手动绑定一下图片。
其他可能有用的参考资料
插件效果
