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() 메서드를 호출하여 앨범에서 사진을 선택합니다. 그런 다음 선택한 이미지 경로를 배열에 넣은 다음 v-for 명령을 통해 각 이미지를 표시합니다. uni.chooseImage()方法从相册中选择图片，然后将选中的图片路径放到一个数组中，再通过v-for指令将每张图片展示出来。

可是当我运行程序时，页面上并没有显示任何图片，于是我就开始了漫长的排查之旅。

二、排查问题

1.图片路径是否正确？

首先我就想到了图片路径的问题，我使用了uniapp的调试工具进行了检查，发现路径并没有问题，而且在调试工具的预览区域中图片是可以正常显示的。

2.图片是否正确加载？

第二个问题是图片是否正确加载，因为我使用的是本地图片，所以我试图将图片上传到了服务器上，发现图片在服务器上可以正常显示，但在本地依旧无法显示。

3.与其他组件是否冲突？

我怀疑是因为我在页面中使用了其他组件与标签产生了冲突，但我注释掉其他组件的代码后依旧无法显示图片。

4.使用uniapp提供的图片浏览组件是否能正常显示？

最后我想到了使用uniapp提供的图片浏览组件<uni-image-preview>来预览图片，结果发现渲染出来的图片是可以正常显示的。

到这里为止，我还是没有找到问题的根源，但也确信了这是标签的问题。

三、解决方案

这时我重新阅读了uniapp官方文档关于使用标签的说明，发现了问题所在：

uni-app 原生组件 image 在使用 web 容器（包括 H5、App）的时候是基于 HTML img 组件实现的。 image 标签的 src 属性，无法直接适配本地路劲，需要特殊处理：

• HBuilderX 开发工具页面，将 App 启动模式设置为 自定义 或 自定义调试，功能 -> 运行 -> App启动模式 -> 自定义(debug)` ，然后就和浏览器一样，本地路径、网络路径均可使用。
• 真机调试时，在 manifest.json 中设置 app-plus -> debug -> webview 为 true。这样在真机上调试时，也可以直接使用本地路径访问。

通过这段说明，我明白了原来是因为标签使用了HTML中的img组件，在uniapp中不支持直接使用本地路径，而需要进行特殊处理。

于是我采用HBuilderX开发工具页面将App

하지만 프로그램을 실행했을 때 페이지에 사진이 표시되지 않아 기나긴 문제 해결 여정을 시작했습니다.

2. 문제 해결🎜🎜1. 이미지 경로가 올바른가요? 🎜🎜우선 이미지 경로 문제를 생각해 보았는데, 유니앱의 디버깅 툴을 이용해서 확인해 보니 경로에는 문제가 없었고, ​​의 미리보기 영역에서 이미지가 정상적으로 표시될 수 있었습니다. 디버깅 도구. 🎜🎜2. 이미지가 올바르게 로드되었나요? 🎜🎜두 번째 질문은 로컬 이미지를 사용하고 있기 때문에 이미지를 서버에 업로드 하려고 했더니 서버에서는 이미지가 정상적으로 표시되는데 여전히 로컬에서는 표시가 되지 않는군요. . 🎜🎜3. 다른 구성 요소와 충돌합니까? 🎜🎜페이지에서 태그와 충돌하는 다른 구성 요소를 사용했기 때문인 것으로 의심되지만 다른 구성 요소의 코드를 주석 처리한 후에도 이미지가 표시되지 않습니다. 🎜🎜4. 유니앱에서 제공하는 사진 탐색 컴포넌트가 정상적으로 표시되나요? 🎜🎜마지막으로 이미지 미리보기를 위해 uniapp에서 제공하는 이미지 브라우징 컴포넌트 <uni-image-preview>를 이용해서 생각해봤는데, 렌더링된 이미지가 정상적으로 표시될 수 있다는 것을 발견했습니다. 🎜🎜지금까지도 문제의 원인을 찾지 못했지만 태그에 문제가 있는 것으로 확신합니다. 🎜🎜3.해결책🎜🎜이때 uniapp 공식 문서에서 태그 사용에 대한 지침을 다시 읽어보고 문제를 발견했습니다: 🎜

🎜uni-app 웹 컨테이너(H5, App 포함)를 사용할 때 기본 구성 요소이미지는 HTML를 기반으로 합니다. code>) img 구성요소에 의해 구현됩니다. image 태그의 src 속성은 로컬 경로에 직접 적용할 수 없으며 특별한 처리가 필요합니다. 🎜

• HBuilderX 개발 도구 페이지에서 앱 시작 모드를 사용자 정의 또는 사용자 정의 디버깅으로 설정하고, 기능-> 정의(디버그)`를 선택하면 브라우저와 마찬가지로 로컬 경로와 네트워크 경로를 모두 사용할 수 있습니다.
• 실제 머신에서 디버깅하는 경우 manifest.json에서 app-plus를 설정하세요. -> webview는 true입니다. 이런 방식으로 실제 머신에서 디버깅할 때 로컬 경로를 직접 사용하여 액세스할 수도 있습니다.

🎜이 설명을 통해 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>

🎜마지막으로, 태그가 로컬 경로를 직접 사용할 수 없는 이유를 이해했으며, 제 경험이 비슷한 문제를 겪고 있는 학생들에게 도움이 되기를 바랍니다. 🎜

위 내용은 uniapp이 사진을 탐색했지만 나오지 않는 문제를 해결하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!