画像パスがブラウザに表示されていないと...
とある日の個人開発でCardコンポーネントに画像パスが空文字列のまま表示したところ下記のようなエラーが表示されました。
このエラーの意味は...
このエラーの意味を調べてみました。
このエラーは、Next.jsやReactを使っている際に、タグやiframeタグなどのsrc属性に空文字（""）が渡されている場合に発生します。
具体的には、src=""のように設定された場合、ブラウザはそのURLが無効であると認識し、ページ全体を再読み込みする原因となる可能性があるため、警告が表示される。
ということは、imgタグを使ている箇所が怪しいというわけですね...
なので、該当するソースコードを見てみましょう。
'use client'
import SelectAllEvents from "@/app/pages/api/selectAllEvents";
import { QueryResult } from "mysql2";
import { useRouter } from "next/navigation";
type Event = {
id:number;
title:string;
description:string;
imageUrl:string
}
//const {userid,eventid,eventtitle,eventdetail,eventthumbnailpath} = event;
export default function Card({event}) {
//ル０ティング設定
const router = useRouter();
const {userid,eventid,eventtitle,eventdetail,eventthumbnailpath} = event;
//編集ボタン押下時の処理
const evenEdit = ()=>{
router.push("/auth/eventEdit?" + "userId=" + userid + "&" + "eventId=" +eventid);//"/auth/eventEdit"
}
//削除ボタン押下時の処理
const eventDelete = ()=>{
router.push("/auth/eventDelete?" + "userId=" + userid + "&" + "eventId=" +eventid);
}
return (
<div>
<div className="card bg-base-100 w-96 shadow-xl">
<div style={{visibility:"collapse"}}>{userid}</div>
<div style={{visibility:"collapse"}}>{eventid}</div>
<div className="card bg-base-100 w-96 shadow-xl">
<figure>
<img src={eventthumbnailpath} alt="No Image"/>
</figure>
<div className="card-body">
<h2 className="card-title">{eventtitle}</h2>
<p>{eventdetail}</p>
<div className="card-action justify-end">
<button className="btn btn-primary" onClick={evenEdit}>編集する</button>
<button className="btn btn-accent" onClick={eventDelete}>削除する</button>
</div>
</div>
</div>
</div>
</div>
);
}
ありました！こちらですね↓
imgタグのsrcの部分ですね。
改修前のこのコードは、画像パスがある前提を書いています。
でも...画像パスが空文字列だった場合の記述がどこにもないですね。
だから、Next.jsからは、「空文字のパスだった場合が、書いてないよ！」と怒られていたのですね。
<figure>
<img src={eventthumbnailpath} alt="No Image"/>
</figure>
では、どのようにして直しましょう？？
それは、このように直すのです↓
srcタグの中にNULLだった場合は...？という表記を加えてあげればよいのです。
<figure>
<img src={eventthumbnailpath || null} alt="No Image"/>
</figure>
では、改修後のソースコードはこちらです↓
'use client'
import SelectAllEvents from "@/app/pages/api/selectAllEvents";
import { QueryResult } from "mysql2";
import { useRouter } from "next/navigation";
type Event = {
id:number;
title:string;
description:string;
imageUrl:string
}
//const {userid,eventid,eventtitle,eventdetail,eventthumbnailpath} = event;
export default function Card({event}) {
//ル０ティング設定
const router = useRouter();
const {userid,eventid,eventtitle,eventdetail,eventthumbnailpath} = event;
//編集ボタン押下時の処理
const evenEdit = ()=>{
router.push("/auth/eventEdit?" + "userId=" + userid + "&" + "eventId=" +eventid);//"/auth/eventEdit"
}
//削除ボタン押下時の処理
const eventDelete = ()=>{
router.push("/auth/eventDelete?" + "userId=" + userid + "&" + "eventId=" +eventid);
}
return (
<div>
<div className="card bg-base-100 w-96 shadow-xl">
<div style={{visibility:"collapse"}}>{userid}</div>
<div style={{visibility:"collapse"}}>{eventid}</div>
<div className="card bg-base-100 w-96 shadow-xl">
<figure>
<img src={eventthumbnailpath || null} alt="No Image"/>
</figure>
<div className="card-body">
<h2 className="card-title">{eventtitle}</h2>
<p>{eventdetail}</p>
<div className="card-action justify-end">
<button className="btn btn-primary" onClick={evenEdit}>編集する</button>
<button className="btn btn-accent" onClick={eventDelete}>削除する</button>
</div>
</div>
</div>
</div>
</div>
);
}
そうすると、警告エラーは消えました！
この件に関してのChatGPTからの回答
このエラーは、Next.jsやReactを使っている際に、タグや
エラーの意味：
src="" が渡されると、ブラウザはそのリンク先が無効であると判断し、最悪の場合、ページ全体を再読み込みしようとします。
空の文字列（""）は、実際にはURLとして機能しないため、リソース（画像やiframeなど）が正しく表示されません。
解決方法：
srcを条件付きで設定する:
srcに空文字を渡すのではなく、値が設定されている場合のみその値を渡すようにします。例えば、画像のURLが存在しない場合は、srcをnullまたはundefinedにすることで、ブラウザがリソースを読み込まないようにできます。
<img src={imageUrl || null} alt="Description" />
要素をレンダリングしない:
srcが空文字の場合、その要素自体をレンダリングしないように条件付きで表示する方法もあります。例えば、srcが設定されていない場合に画像タグを表示しないようにします。
{imageUrl && <img src={imageUrl} alt="Description" />}