スライドに画像を表示したいです

実現したいこと

スライド画像機能を動作するようにする

前提

bootstrap導入済み
参考サイトhttps://blog.codecamp.jp/bootstrap-howto-commentary

画像投稿SNSを作っています。
トップ画面にてスライド機能を実装したいのですが、画像の指定方法が分かりません。

発生している問題・エラーメッセージ

サイトにimg srcの部分を書き換えれば自分が望む画像に書き換えられる、とのことでしたが記述方法が分かりません。

該当のソースコード

これはサイトの例文です。
 <div class="carousel-item">
            <img src="img/sample3.jpg" class="d-block w-100" alt="...">
          </div>

試したこと

使用したい画像はasset>imagesの中にあるので、<img src="../../assets/images/about5.jpg"　と記入しました。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

行動規範の内容に同意します

回答1件

ベストアンサー

<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
ここも含める必要があります。

また、この参考記事でのBootstrapのバージョンは4.5ですが、現在は5.3.0が最新版です。JPサイトでも5.0.2が最新となっています。それにともなってdata-rideはdata-bs-rideに変わっているので最新版を使う際は注意してください。ドキュメントはこちらを参考にしてください。

画像の指定方法が分かりません

というのがsrc=以降のパスの設定に誤りがある場合があります。
相対パスは記述しているhtmlファイルから見て画像ファイルがどこにあるのかを指します。
ディレクトリassetsがhtmlと同じディレクトリにあるなら、src="assets/images/about5.jpg"のように書きます。

投稿2023/03/15 07:41