uniappで写真を移動しても表示されない問題を解決するにはどうすればよいですか?

最近、uniapp を使用して小さなプログラムを開発していたときに、画像をトラバースするときに画像が正常に表示されないという問題が発生しました。いくつかの探索と調査の後、ついに解決策を見つけたので、今それを共有します。

1. 問題の説明

私が開発した小さなプログラムでは、フォルダー内のすべての画像を走査し、ページ上に表示する必要があります。まず、uniapp のネイティブ コンポーネント を使用して画像を表示しました。具体的なコードは次のとおりです:

<template>
  <view>
    <image v-for="(item, index) in imageList" :src="item.path" :key="index"></image>
  </view>
</template>

<script>
export default {
  data() {
    return {
      imageList: [] // 图片列表
    }
  },
  methods: {
    async getImageList() {
      const { tempFilePaths } = await uni.chooseImage({ // 从相册中选择图片
        count: 9,
        sizeType: ['original', 'compressed'],
        sourceType: ['album'],
      })
      for (let i = 0; i < tempFilePaths.length; i++) {
        this.imageList.push({
          path: tempFilePaths[i],
        })
      }
    }
  },
  mounted() {
    this.getImageList()
  }
}
</script>

このコードは、uni.chooseImage() を呼び出してアルバムから選択するだけです。メソッド Picture を使用して、選択したピクチャ パスを配列に配置し、v-for コマンドを使用して各ピクチャを表示します。

しかし、プログラムを実行するとページに画像が表示されなかったため、長いトラブルシューティングを開始することになりました。

2. トラブルシューティング

1. イメージのパスは正しいですか?

まず、画像のパスの問題を考えましたが、uniappのデバッグツールで確認したところ、パスに問題はなく、プレビューでも正常に画像が表示されていました。デバッグツールの領域。

2. 画像は正しく読み込まれていますか?

2 番目の質問は、画像が正しく読み込まれているかどうかです。ローカル画像を使用しているため、画像をサーバーにアップロードしようとしましたが、画像はサーバー上で正常に表示されることがわかりましたが、まだ表示されません。ローカルでは表示できません。

3. 他のコンポーネントと競合しますか?

タグと競合する他のコンポーネントをページ内で使用しているためだと思われますが、他のコンポーネントのコードをコメントアウトした後も、画像は表示できません。

4. uniappが提供する画像閲覧コンポーネントは正常に表示できますか？

最後に、uniapp<uni-image-preview> が提供する画像閲覧コンポーネントを使って画像をプレビューしてみようと考えたところ、レンダリングされた画像が正常に表示できることがわかりました。

現時点ではまだ問題の原因は見つかっていませんが、 タグに問題があると確信しています。

3. 解決策

この時点で、uniapp の公式ドキュメントにある タグの使用方法を再読したところ、問題を発見しました:

uni-app ネイティブ コンポーネント image は、 #web コンテナ (H5、App## を含む) を使用する場合に # に基づきます#) ##HTML img コンポーネントによって実装されます。 image タグの src 属性はローカル パスに直接適用できず、特別な処理が必要です:

HBuilderX
• 開発ツールページで、App スタートアップ モードを Custom または Customized debugging に設定し、関数 -> 実行 -> アプリ起動モード -> カスタム (デバッグ) ` , その後、ブラウザと同じように、ローカル パスとネットワーク パスの両方を使用できます。 実機でデバッグする場合は、
manifest.json
• -> debug -> webview に app-plus を設定します は true です。これにより、実機でデバッグする際にも、ローカルパスを使用して直接アクセスすることができます。

この説明により、#Direct の

HTML

で タグが img コンポーネントを使用しているためであることがわかりました。ローカル パスの使用は ##uniapp ではサポートされていないため、特別な処理が必要です。 そこで、HBuilderX

開発ツール ページを使用して、

App の起動モードをカスタム (デバッグ) に設定したところ、画像が正常に表示されるようになりました。

<template>
  <view>
    <image v-for="(item, index) in imageList" :src="&#39;/&#39; + item.path" :key="index"></image>
  </view>
</template>

<script>
export default {
  data() {
    return {
      imageList: [] // 图片列表
    }
  },
  methods: {
    async getImageList() {
      const { tempFilePaths } = await uni.chooseImage({ // 从相册中选择图片
        count: 9,
        sizeType: ['original', 'compressed'],
        sourceType: ['album'],
      })
      for (let i = 0; i < tempFilePaths.length; i++) {
        this.imageList.push({
          path: tempFilePaths[i],
        })
      }
    }
  },
  mounted() {
    this.getImageList()
  }
}
</script>

この調査の結果、最終的に、<image> タグがローカル パスを直接使用できない理由がわかり、正しい解決策を得ることができました。私の経験が、同様の問題を抱えている学生に役立つことを願っています。 .

以上がuniappで写真を移動しても表示されない問題を解決するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。