Vue3 のスタイル ディレクティブは、background-image を使用すると 404 エラーを生成します

Question

次のように、axios.get を介して データベース からリアクティブな 画像リンク を取得しています。 リーリー

すべてが正常に動作し、div の背景画像が正しく変更されます。唯一の問題は、コンソールが次のようにスローすることです:

リーリー

これは明らかに、

url がどこも指していないことを示していますが、background-image が正しく表示されている場合、どのようにしてこれが可能になるのでしょうか?私の CSS には background-image プロパティ セットがなく、background: no-repeat center のみが設定されていますが、これらのエラーを削除してもまだ存在します。 404 を取り除く方法はありますか?

template を template に送信する前に console.log(state.articles.image[0]) を実行すると、正しい画像リンクが生成されます。 リーリー

テンプレート内 (h タグ内など) にリンクを出力しても、正しいリンクが表示されるのですが、何が問題なのでしょうか?

Answer 1

テンプレートは、state.articles.image[0] が認識される前にレンダリングされます。 div タグがレンダリングされ、ブラウザーはまだ定義されていない 未定義 背景画像の URL を取得しようとします。この問題を解決する 1 つの方法は、状態の準備ができたときに <div> のみをレンダリングすることです。

リーリー