画像参照:
リーリーディレクトリ構造:
Lu Jin に関連して書かれているのに、画像が表示されないのはなぜですか?
コンソール プロンプト:
ウェブパック:
リーリー原因が判明しました:
リーリーLu Jin は dist に対する相対パスを記述する必要があります
しかし、ここで別の問題が発生します! このように記述すると、実際の運用環境では画像が表示されません!
静的リソースを下に置くつもりはありません。 /dist, downstairs 以下は静的ファイルの作成方法です。これで webpack が設定されます。共有できる友達はいますか?
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
静的リソースの問題は解決されました。 解決策:
開発中のWebpack-devserver構成:実稼働環境でコンパイルするときに、/static ディレクトリ内のファイルを /dist ディレクトリにコピーできます。 リーリー
リーリー
この方法では、コードに絶対パス /static/.. を記述するだけで済みます画像を書き込んだファイルはどこですか? 「../assets/image/setting.png」は、画像を書き込んだファイルがコンポーネントディレクトリにある場合にのみ有効です。
vue-cli の webpack テンプレートを使用している場合は、次のような絶対パスに変換されます。
/images/setting.png画像は静的フォルダーに置くことをお勧めします。固定パスはすべて /static の下に配置されます。パッケージ化の前後で場所が変更されない唯一の場所です。