axiosを使用してAPI呼び出しから動的値を受け取るときに、間違ったパスが原因でVue jsイメージのv-bind srcが機能しない

Question

画像の表示に問題があります。SQL データベースから画像のパスを取得して、Web サイトのプロジェクトに表示したいと考えています。これが私がそれを機能させようとした方法です:

リーリー

testItem.pictureLink には、この文字列 "@/assets/b1q2v1.png"

があります。

画像へのパスが変更されるため、これは機能しません。開発者向けオプションの [ネットワーク] タブで、リクエスト URL を

に変更します。

localhost:8080/courses/tests/@/assets/b1q2v1.png

次に、v-bind を使用せずに文字列を手動で入力すると:

リーリー

表示される画像のリクエストURLは

です

ローカルホスト:8080/img/b1q2v1.2aa65ed1.png

同様の解決策を試しました

リーリー

しかし、動作しません。エラーは次のとおりです:

エラー: モジュール「@/assets/b1q2v1.png」が見つかりません

src 属性を動的画像パスに正しくバインドするにはどうすればよいですか?

Answer 1

pictureLink を名前:

に変更できます。 リーリー

次に、画像を取得するメソッドを作成します:

リーリー

そして、テンプレートからメソッドを呼び出します:

リーリー