【Next.js】Daisy UIのCardの画像パスが無い時に発生するエラーの対処方法

# 画像パスがブラウザに表示されていないと...
とある日の個人開発でCardコンポーネントに画像パスが空文字列のまま表示したところ下記のようなエラーが表示されました。

![画面のエラー.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1169664/36052f11-0f1a-daec-1840-c1eaa3a3b7cf.png)

# このエラーの意味は...
このエラーの意味を調べてみました。

![エラー詳細.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1169664/0dc44def-df8c-d29a-0467-595bae2324fa.png)

:::note warn
このエラーは、Next.jsやReactを使っている際に、<img>タグやiframeタグなどのsrc属性に空文字（""）が渡されている場合に発生します。
具体的には、src=""のように設定された場合、ブラウザはそのURLが無効であると認識し、ページ全体を再読み込みする原因となる可能性があるため、警告が表示される。
:::

ということは、`imgタグ`を使ている箇所が怪しいというわけですね...
なので、該当するソースコードを見てみましょう。

```app/components/card/page.tsx
'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からは、<b>「空文字のパスだった場合が、書いてないよ！」</b>と怒られていたのですね。
```app/components/card/page.tsx
<figure>
    <img src={eventthumbnailpath} alt="No Image"/>
</figure>
```

では、どのようにして直しましょう？？

それは、このように直すのです↓

`src`タグの中に`NULLだった場合は...？`という表記を加えてあげればよいのです。
```app/components/card/page.tsx
<figure>
    <img src={eventthumbnailpath || null} alt="No Image"/>
</figure>
```

では、改修後のソースコードはこちらです↓
```app/components/card/page.tsx
'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> 
    );
}
```

そうすると、警告エラーは消えました！

![編集一覧画面.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1169664/6d17ccd1-2264-ad80-f7d9-b8077f6a8cf4.png)


# この件に関してのChatGPTからの回答
このエラーは、Next.jsやReactを使っている際に、<img>タグや<iframe>タグなどのsrc属性に空文字（""）が渡されている場合に発生します。具体的には、src=""のように設定された場合、ブラウザはそのURLが無効であると認識し、ページ全体を再読み込みする原因となる可能性があるため、警告が出ているということです。

<b>エラーの意味：</b>
src="" が渡されると、ブラウザはそのリンク先が無効であると判断し、最悪の場合、ページ全体を再読み込みしようとします。
空の文字列（""）は、実際にはURLとして機能しないため、リソース（画像やiframeなど）が正しく表示されません。
<b>解決方法：</b>
srcを条件付きで設定する:

srcに空文字を渡すのではなく、値が設定されている場合のみその値を渡すようにします。例えば、画像のURLが存在しない場合は、srcをnullまたはundefinedにすることで、ブラウザがリソースを読み込まないようにできます。

```sample.tsx
<img src={imageUrl || null} alt="Description" />

```

<b>要素をレンダリングしない:</b>

srcが空文字の場合、その要素自体をレンダリングしないように条件付きで表示する方法もあります。例えば、srcが設定されていない場合に画像タグを表示しないようにします。
```page.tsx
{imageUrl && <img src={imageUrl} alt="Description" />}

```