<p>テキスト、画像タグ、および次のようなテキストを含む HTML ページがあります。</p> <pre class="brush:php;toolbar:false;">これは画像の前のテキストです。 <img src="image.jpeg"/> 画像の後の文章です。 </pre> <p>画像の読み込みには時間がかかるため、ページが読み込まれると、画像よりも先にテキストが読み込まれるようになりました。そのため、画像の後のテキストが画像の前のテキストの直後に配置されるようにレイアウトが変更され、画像がまだ読み込まれていない場合、画像用のスペースは確保されません。ただし、画像が読み込まれると、画像に続くテキストが下に移動します。つまり、レイアウトが変わります。レイアウトの変更を避けるために、画像を読み込む前に画像用のスペースを予約するにはどうすればよいですか?さらに、任意の画像を画像タグに含めることができ、画像のサイズも動的です。画像の元のサイズがページに表示される必要があります。また、サーバーサイドレンダリングを使用しているため、表示したい画像のサイズが事前にわかっています。画像の高さと幅を修正することはできません。画像のサイズが変更されて表示されると、画像が画面のサイズに適合しなくなるため、問題が発生します。 </p>