⑦記事の中に画像を入れる

Cursor

firstpj/public

ここが画像フォルダ

大量に画像を入れるなら、publicフォルダ直下にimagesフォルダ(もしくはimgs,imgフォルダ)を作った方がいい

welcome.mdx

画像を表示したい場所に

![sample image](/images/sample.jpg)

画像全体のデザイン調整

mdx-components.tsxで

const components: MDXComponents = {

img: ({ src, alt }) => (

<img

src={src}

alt={alt || “”}

className=”article-image”

/>

),

}

としてから、src/globals.cssでクラスのCSSを指定する

特定の画像デザインを調整する場合

<ArticleImage

src=”/images/sample.jpg”

alt=”sample image”

caption=”sample image”

/>

のような画像Componentsを作りたいので、

BACK