Als ich kürzlich ein kleines Programm mit uniapp entwickelte, stieß ich auf ein Problem: Beim Durchlaufen von Bildern konnten die Bilder nicht normal angezeigt werden. Nach einigem Erkunden und Recherchieren habe ich endlich eine Lösung gefunden und teile sie jetzt mit Ihnen.
1. Problembeschreibung
In dem kleinen Programm, das ich entwickelt habe, muss ich alle Bilder in einem Ordner durchlaufen und auf der Seite anzeigen. Zuerst habe ich die native Komponente verwendet, um Bilder anzuzeigen:
<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>Nach dem Login kopieren
Dieser Code wählt einfach Bilder aus dem Album aus, indem er die Methode uni.chooseImage() aufruft. und fügen Sie dann den ausgewählten Bildpfad in ein Array ein und zeigen Sie dann jedes Bild mit dem Befehl v-for an. 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
Aber als ich das Programm ausführte, wurden keine Bilder auf der Seite angezeigt, also begann ich eine lange Reise zur Fehlerbehebung.
2. Fehlerbehebung🎜🎜1. Ist der Bildpfad korrekt? 🎜🎜Zuerst habe ich über das Problem des Bildpfads nachgedacht und mit dem Debugging-Tool von uniapp festgestellt, dass es kein Problem mit dem Pfad gibt und das Bild im Vorschaubereich von normal angezeigt werden kann das Debugging-Tool. 🎜🎜2. Werden die Bilder korrekt geladen? 🎜🎜Das zweite Problem besteht darin, ob das Bild korrekt geladen wird. Da ich ein lokales Bild verwende, habe ich versucht, das Bild auf den Server hochzuladen, und festgestellt, dass das Bild auf dem Server normal angezeigt werden kann, aber immer noch nicht lokal angezeigt werden kann . 🎜🎜3. Kommt es zu Konflikten mit anderen Komponenten? 🎜🎜Ich vermute, dass es daran liegt, dass ich andere Komponenten auf der Seite verwende, die mit dem
-Tag in Konflikt stehen, aber nachdem ich den Code anderer Komponenten auskommentiere, kann das Bild immer noch nicht angezeigt werden. 🎜🎜4. Kann die von uniapp bereitgestellte Bildsuchkomponente normal angezeigt werden? 🎜🎜Schließlich dachte ich darüber nach, die von uniapp bereitgestellte Bildbrowserkomponente <uni-image-preview> zu verwenden, um eine Vorschau des Bildes anzuzeigen, und stellte fest, dass das gerenderte Bild normal angezeigt werden konnte. 🎜🎜Bis jetzt habe ich die Ursache des Problems noch nicht gefunden, bin aber überzeugt, dass es sich um ein Problem mit dem -Tag handelt. 🎜🎜3. Lösung🎜🎜Zu diesem Zeitpunkt habe ich die Anweisungen zur Verwendung des -Tags noch einmal gelesen und das Problem gefunden: 🎜🎜uni-app Native Komponenteimage basiert auf HTML, wenn Web-Container verwendet werden (einschließlich H5, App code>) Wird von der <code>img-Komponente implementiert. Das Attribut src des Tags image kann nicht direkt an den lokalen Pfad angepasst werden und erfordert eine spezielle Verarbeitung: 🎜
-
HBuilderX Entwicklung Stellen Sie den App-Startmodus auf Benutzerdefiniert oder Benutzerdefiniertes Debuggen ein, Funktion-> Define (debug)`, dann können genau wie beim Browser sowohl lokale Pfade als auch Netzwerkpfade verwendet werden.
- Beim Debuggen auf einer realen Maschine legen Sie
app-plus in manifest.json fest -> webview
ist true. Auf diese Weise können Sie beim Debuggen auf einem realen Computer auch direkt über den lokalen Pfad zugreifen.
🎜Durch diese Erklärung verstehe ich, dass das daran liegt, dass das -Tag die img-Komponente in HTML verwendet. Die direkte Verwendung lokaler Pfade wird in uniapp nicht unterstützt und eine spezielle Verarbeitung ist erforderlich. 🎜🎜Also habe ich die HBuilderX-Entwicklungstoolseite verwendet, um den App-Startmodus auf „Benutzerdefiniert“ (Debug) zu setzen, und jetzt können die Bilder normal angezeigt werden. 🎜<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>Nach dem Login kopieren
Das obige ist der detaillierte Inhalt vonWie kann das Problem gelöst werden, dass Uniapp Bilder durchläuft, aber nicht herauskommt?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
