Nuxt.jsでstatic画像が表示されない

Question

前提・実現したいこと

Nuxt.jsを使用してホームページを作成しているのですが、
staticディレクトリに保存している画像が正しく読み込まれません。
現在、OGPの設定を行っており、
[og:image]の設定にstaticディレクトリに保存した[img/ogp.jpg]を
適用させ、シェアデバッガーで確認したところエラーとなってしまいました。

そもそもstaticディレクトリに保存された同画像を
imgタグで表示させようとすると
開発環境では正しく表示されるのですが、
本番へデプロイすると画像が表示されないという状態になっております。

私としても調べたつもりでしたが、
答えにたどり着くことができなかったため質問させてください。

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

シェアデバッガーでOGPの設定状況を確認したところ以下のエラーが表示されました。

https://***ドメイン***.com/img/ogp.jpgのダウンロード中にエラー(HTTP応答コード: 404)が発生しました

本番にデプロイしたサイトを検証ツールで確認したところ、Networkタグから[favion.ico]のエラーも出ておりました。
こちらも同じくstaticに保存している画像となります。

Request URL: https://***ドメイン***.com/favicon.ico
Request Method: GET
Status Code: 404
Remote Address: 76.76.21.21:443
Referrer Policy: strict-origin-when-cross-origin

該当のソースコード

nuxt.config.jsのコードは以下となります。

export default {
  ssr: false,
  target: 'static',

  head: {
    title: "***タイトル***",
    titleTemplate: "***タイトルテンプレート***",
    htmlAttrs: {
      lang: "ja",
      prefix:
        "og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# website: http://ogp.me/ns/website#"
    },
    meta: [
      *** 一部省略 ***
      { hid: "og:type", property: "og:type", content: "article" },
      { hid: "og:url", property: "og:url", content: "https://***ドメイン***.com" },
      { name: "twitter:card", content: "summary_large_image" },
      { hid: "note:card", property: "note:card", content: "summary_large_image" },
      { hid: "og:site_name", property: "og:site_name", content: "**サイト名**" },
      { hid: "og:title", property: "og:title", content: "***タイトル***" },
      { hid: "og:image", property: "og:image", content: "https://***ドメイン***.com/img/ogp.jpg" },
      { hid: "twitter:image", name: "twitter:image", content: "https://***ドメイン***.com/img/ogp.jpg" },
      { hid: "og:description", property: "og:description", content: "***文章***" }
    ],
    link: [
      { rel: "icon", type: "image/x-icon", href: "/favicon.ico" },
      { rel: "apple-touch-icon", href: "/icon.png" }
    ]
  }
};

また、staticディレクトリの画像をページで利用する際は、ドキュメントに従って以下のように書いております。
しかし、開発環境では確認できても本番にデプロイすると表示されません。

<template>
  <div>
    <img src="/img/ogp.jpg" alt="">
  </div>
</template>

試したこと

・[https://ドメイン.com/img/ogp.jpg]を直接ブラウザで入力しましたが画像が表示されませんでした。
・[http://localhost:3000/img/ogp.jpg]であれば、開発環境で確認できました。
・ページ生成の前にpwa関連のキャッシュ画像が削除されるようpackage.jsonのgenarateを以下に書き換えた。

{
  "name": "***サイト名***",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "nuxt start",
    "generate": "rm -r /node_modules/.cache/pwa/icon && nuxt generate"
  }
}

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

フレームワーク ： Nuxt.js(@nuxt/cli v2.15.7)
ホスティング先 : Vercel
データベース等 : Google Firestore と CloudStorage

Comments

[k_a]

・`generate`した成果物に`static`の中にあったファイルやフォルダは存在していますか？
・`generate`した成果物をローカルWEBサーバー(LiveServer等)でホストした際は正しく動作しますか？

[irifune]

ご質問を見ていただきありがとうございます。
回答申し上げます。
ご不明点等ございましたら、何なりおっしゃってください。

> `generate`した成果物に`static`の中にあったファイルやフォルダは存在していますか？
開発環境では存在しております。
本番環境の方ではファイルが存在するか確認する方法がわからず検証できませんでした。
確認方法としては、開発環境で、[node_modules/.bin/nuxt generate]を行い、
生成されたdistディレクトリを確認しました。

> `generate`した成果物をローカルWEBサーバー(LiveServer等)でホストした際は正しく動作しますか？
ローカルWEBサーバ(http://localhost:3000/)上では、正しく動作しているようです。
具体的には、imgタグのsrc属性に指定することで正しく表示されております。
この状態で、マージし、再デプロイをしても本番環境では表示されておりませんでした。
また、同じくstaticディレクトリで管理している[favicon.ico]画像も正しく使用されているようで
[http://localhost:3000/favicon.ico]でアクセスすると画像が表示されております。

[FKM]

これを試しましたか？確か.でカレントパス指定が必要だったはず…
<img src="./img/ogp.jpg" alt="">

[irifune]

ご質問を見ていただきましてありがとうございました。
ご教示いただいた方法を試したところ、
開発環境時点でエラーとなってしまい、
正しくコンパイルすることができませんでした。

公式ドキュメントを確認したところ、
カレントパス指定する方法を見つけられなかったため、
コミットすることを断念しました。

開発構築時点で設定ミスがあったのか
FKMさんと同じ結果にならずすみませんでした。

https://ja.nuxtjs.org/docs/2.x/directory-structure/static

Answer 1

package.json

"generate": "rm -r /node_modules/.cache/pwa/icon && nuxt generate"

これは /node_modules/.cache/pwa/icon ではなく ./node_modules/.cache/pwa/icon としたかったんじゃないでしょうか。（.が抜けていてカレントディレクトリではなくルートディレクトリをみてしまっています）

おそらくpushするとどこかでビルドしてDeployするような作りになっているのだと思うのですが、 /node_modules が存在しないので rm が失敗して、後続の && nuxt generate まで実行されていないのではないでしょうか。

（追記：「まだ回答を求めています」としていますが、この回答についてどうだったか確認していただきたいです……）

Comments

[irifune]

回答ができておらず、失礼いたしました。
ご教授いただいた方法を以下の通り、試してみました。
```
"generate": "rm -r ./node_modules/.cache/pwa/icon && nuxt generate"
```
/node_modulesの前に「.」をつけてカレントディレクトリを見るように変更し、
再デプロイし、シークレットウィンドウで確認しましたが、
正しく読み込みができませんでした。

念のため、iconを削除するコマンドをなくして元の状態でも実施しました。
```
"generate": " nuxt generate"
```
しかし、同じくstatic画像は読み込まれておりませんでした。

せっかくご教授いただいたのにも関わらず、
結果が変わらなかったこと、ご回答が遅れましたこと
本当に申し訳ございませんでした。

[aaharu]

承知しました。
Vercelへのデプロイ周りがあやしいのかなと思うのですが、デプロイについてどのような設定をしているかわかりますか？
特に何もせずデフォルトのままでしょうか。