img el-image は画像リストにアクセスし、画像 403 問題を解決します。

現象:

ローカル開発画像リスト、画像アクセス 403、表示できません

CSS背景画像リクエストエラー403

画像リクエストは正常です

理由:

403 は、ホット リンクを防止するためのエラーです (この設計は、API メーカーがサーバーにトラフィックが殺到しないようにするためのものです)。

解決する:

方法 1:
非リファラー ソリューションを使用して、画像のホットリンクだけでなく、他のタグへの
ホットリンクも防止します。

<meta name="リファラー" content="リファラーなし" />

リファラーを設定します:

1) HTMLページの<head>ヘッダー領域にメタタグを使用してリファラー属性を追加します

 <meta name="リファラー" content="リファラーなし" />

2) Vue2 プロジェクトはページ上の「template」タグに直接記述できます

2. 対応するタグに属性を追加します

リファラー
<!-- タグのリファラー -->
<a href="http://example.com" Referrer="no-referrer|origin|unsafe-url">xxx</a>のいくつかのステータス

<!-- img/image标签のリファラー -->
<img Referrer="no-referrer|origin|unsafe-url" src="{ { item.src}}"/>
<image Referrer="no-referrer|起源|安全でない URL" src="{ {item.src}}"></image>

<!-- 要素タグのリファラー -->

 <el-image
      style="width: 100px; height: 100px"
      :src="url"
      :preview-src-list="srcList"
      :initial-index="4"
       :referrer-policy='no-referrer'
      フィット="カバー"
    />

要素の公式 Web サイトを表示 el-image には属性があります

リファラーポリシー:'リファラーなし'

おすすめ

転載: blog.csdn.net/weixin_51747462/article/details/132041744