uniApp、アプリ開発、写真引用後、実機テストプレビューエラー

uniapp は、Vue をベースとした国産のフロントエンド クロスプラットフォーム フレームワークであり、複数のプラットフォームで共有できるコード群を実現できます。しかし、画像コンポーネントには確かにいくつかの問題があります。

公式ドキュメントではこのように説明しています

実機でテストすると、この問題はポップアップ ウィンドウのプレビュー エラーとして現れます --- URL が定義されていません

ただ、絶対パスで画像をインポートすることができないので、メンテナンス時に非常に面倒です。そこで私は次のように考え始めました。

パスをたどっても見つからないかもしれないので、パスは教えません。失われないようにbase64エンコーディングを教えておきます。たまたま、画像のsrc属性がコンポーネントはbase64をサポートします。

それで、まず画像を Base64 に変換してから、json ファイルに保存します。(ここでは一般的なアイデアを示しているだけです。この Base64 は完全なものではありません。完全なものは多すぎます。はははは)。

{
    "logo1":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADICAYAAACtWK6eAAAAAXNSR0IArs4c6QAAIABJRErkJggg=="
}

次に、読み込み時にページが対応する json を取得できるようにします。ここでは簡素化するために require を使用していますが、Json ファイルが比較的大きい場合は、axios を通じて取得するのが最善です。

<image :logoImg="logo1" style="width: 50px;height: 50px;display: inline-flex;"/>

var logoImg=require('你的json文件地址，包括文件后缀啊').logo1

最後に、電源投入テストの後、実機はバグなく完全に動作し、プレビュー エラー メッセージは最終的に消えました。

別の解決策、ははは、お役に立てば幸いです。