[Next]Next.jsでの画像の使用

Nextで画像を使うのは大変です.
次の参照は、正式なファイルにあります.

画像コンポーネント自体はNextによって提供される.
ちょっとありがたいですが、本当にそうでした.
まず、画像素子を使用する場合、src、width、heightのプロパティは欠かせません.
この3人のうち1人が少なければ、間違いが起こります——————...
サーバーからデータを受信して画像を送信する必要があるので、本当に迷っています.
検索するとnext-imagesというモジュールが見つかりました
これは一筋の光明であり、希望でもある.
モジュールをインストールしておきましょう.
インストール:npm i next-images公式ドキュメントで提供されているconfig設定を適用してこそ、nextで使用できます.

// next.config.js

const withImages = require('next-images')
module.exports = withImages({
  webpack(config, options) {
    return config
  }
})

設定が完了したら、次のように使用できます.
基本的な使い方は以下の通りです.

export default () => <div>
  <img src={require('./my-image.jpg')} />
</div>

OR

import img from './my-image.jpg'

export default () => <div>
  <img src={img} />
</div>

1つはsrc属性が直接使用することを要求する方法である.
もう1つの方法は、モジュールのように画像をインポートし、それを変数としてsrc属性に埋め込むことです.
私が選んだ方法は前者でも後者でもない.
以下のように変数として打ち込んだだけです.

<div>
  <img src={url} />
</div>

それ以外にも様々な方法で画像を加えることができますが、まずnext-imagesに満足してから終わります.