GatsbyJS搭配NetlifyCMS时img样式改动导致emoji显示异常如何解决

方案1：CSS选择器区分（改动最小，无需修改渲染逻辑） #

绝大多数Markdown渲染器输出的emoji图片都会带有特殊属性标识，你可以直接通过属性选择器给两类图片设置不同样式：

/* 原有全局图片居中样式，调整为仅作用于普通图片 */
.markdown-body img:not([src*="emoji"]):not([class*="emoji"]):not([alt^="😀"]) {
  display: block;
  margin: 12px auto;
  max-width: 100%;
}

/* 单独给emoji图片设置行内展示样式 */
.markdown-body img[src*="twemoji"],
.markdown-body img[src*="/emoji/"],
.markdown-body img[class*="emoji"] {
  display: inline-block;
  height: 1em;
  width: 1em;
  margin: 0 0.1em;
  vertical-align: -0.1em;
}

你可以打开浏览器控制台查看你站点emoji图片的实际src、class、alt属性，调整上面的匹配规则即可。

方案2：针对单独占行的图片设置居中（适配绝大多数博客场景） #

通常博客正文里需要居中的图片都是单独占一行的，也就是<p>标签里只有这一个img元素，而emoji都会和文字混排，你可以直接修改选择器的匹配范围：

/* 仅给单独占行的图片应用居中样式 */
.markdown-body p > img:only-child {
  display: block;
  margin: 12px auto;
  max-width: 100%;
}

/* 剩余的img默认行内展示，刚好适配emoji的需求 */
.markdown-body img {
  max-width: 100%;
}

方案3：自定义Markdown渲染逻辑（最稳定，不会出现匹配误差） #

如果你的站点用了gatsby-plugin-mdx或者gatsby-transformer-remark，可以自定义img组件的渲染规则，主动给emoji和普通图片加不同类名：

// 写入站点根目录的gatsby-browser.js文件
import { MDXProvider } from '@mdx-js/react'

const components = {
  img: (props) => {
    // 匹配emoji规则：src包含emoji关键字，或alt是单个emoji字符
    const isEmoji = props.src.includes('emoji') || /^\p{Emoji}$/u.test(props.alt)
    return <img {...props} className={isEmoji ? 'inline-emoji' : 'post-image'} />
  }
}

export const wrapRootElement = ({ element }) => (
  <MDXProvider components={components}>{element}</MDXProvider>
)

之后再给两个类单独写样式即可：

.post-image {
  display: block;
  margin: 12px auto;
}
.inline-emoji {
  display: inline-block;
  height: 1em;
  width: 1em;
  vertical-align: middle;
}

内容的提问来源于stack exchange，提问作者Scott Montford