JavaScript - 画像パスの参照に関する問題

Question

画像参照:

リーリー

ディレクトリ構造:

Lu Jin に関連して書かれているのに、画像が表示されないのはなぜですか?
コンソール プロンプト:

ウェブパック:

リーリー

原因が判明しました:

リーリー

Lu Jin は dist に対する相対パスを記述する必要があります
しかし、ここで別の問題が発生します! このように記述すると、実際の運用環境では画像が表示されません!
静的リソースを下に置くつもりはありません。 /dist, downstairs 以下は静的ファイルの作成方法です。これで webpack が設定されます。共有できる友達はいますか?

Answer 1

静的リソースの問題は解決されました。 解決策:
実稼働環境でコンパイルするときに、/static ディレクトリ内のファイルを /dist ディレクトリにコピーできます。 リーリー

開発中のWebpack-devserver構成:

リーリー

この方法では、コードに絶対パス /static/.. を記述するだけで済みます

Answer 2

画像を書き込んだファイルはどこですか? 「../assets/image/setting.png」は、画像を書き込んだファイルがコンポーネントディレクトリにある場合にのみ有効です。

Answer 3

vue-cli の webpack テンプレートを使用している場合は、次のような絶対パスに変換されます。 /images/setting.png画像は静的フォルダーに置くことをお勧めします。

Answer 4

固定パスはすべて /static の下に配置されます。パッケージ化の前後で場所が変更されない唯一の場所です。