vueのimgのsrc属性バインディングの問題、間違った画像が表示される

vueのimgのsrc属性バインディングの問題、間違った画像が表示される

問題: img の src 属性に入力された画像アドレスは正常にレンダリングできますが、binding:src属性が使用されると画像のロードに失敗します。

このやりとりは前のフロントエンド兄さんはやっていなかったので、引き継いで追加しました、とてもシンプルなやりとりです、絵を差し替える際に三値判定を用意しました、srcには属性バインディングが必要なので、同じようにしましたアドレスを入力して画像を載せました ただ読み込めないだけです、画像が読み込めません、アドレスの問題に違いありません(一文を挿入:ラスボスのファイル構造が標準化されていない可能性があります)、通常静的ファイルは保存されていますが、彼は静的な (泣き笑い) .gif) を作成しました)

上記のコード:

<img src="../../src/stalic/font/arrow0-0.png" alt="">  //上一位的
<img :src="Bol == 1 ? imgUrl : imgUrl2" alt="">     //我的   data里面是:
imgUrl: '../../../src/stalic/font/arrow0.png',
imgUrl2: '../../../src/stalic/font/arrow0-0.png'

しかし、ブラウザは私の画像をレンダリングしませんでしたが、彼の画像は同じパスで正常にレンダリングできるのに、なぜ私の画像が表示されないのでしょうか? また、ブラウザはエラーを報告していません。

理由:ここではローカルパスが使用されており、静的な静的フォルダーを思い出したので、画像を静的フォルダーに置きました

画像-20230523144740036

パスを再度変更します。

imgUrl: ./static/arrow0.png,
imgUrl2: ./static/arrow0-0.png

または共通

imgUrl: require('../../../src/static/font/arrow0.png'),
imgUrl2: require('../../../src/static/font/arrow0-0.png')

ようやく画像が表示されました。ローカル画像パスが表示できない問題を解決できるいくつかの問題をまとめます。

1.把图片放在src同级的static文件夹下。
2.把图片放在cdn上,把网络地址存在imgUrl里,然后直接<img :src="imgUrl">去展示。
3.图片放在assets文件夹,然后在data里面require进图片

data() {
    
    
	imgUrl:require('./assets/logo.png')
}

然后放入<img :src="imgUrl">展示即可。

おすすめ

転載: blog.csdn.net/qq_53461589/article/details/130827253