sakelog/nextjs_blog

Markdownの画像にアイコンが表示されてしまう

Closed this issue · 1 comments

発生事象

Markdown中に画像を表示させるとアイコンが表示されてしまう

発生原因

記事中の画像からオリジナル画像へのリンクがtarget=_blankで開くため。
CSSでの指定と干渉

今後の対策

  • CSSの修正

修正済み。

下記の通り修正しました。

    a[target="_blank"]{
      padding-right: 0.375rem;
  
      &::after {
        display: inline-block;
        width: 20px;
        height: 20px;
        background: url(/img/external-link.svg) no-repeat 0 0;
        background-size: 20px 20px;
        content: "";
        position: relative;
        top: 0.15625rem;
        left: 0.125rem;
      }
      &.gatsby-resp-image-link::after {
        content: none;
      }

gatsby-resp-image-linkクラスで画像リンクが貼られているので、::aftercontent: none;を指定