Was soll ich tun, wenn das von uniapp zurückgegebene Bild nicht angezeigt wird?

Bei der Entwicklung mobiler Anwendungen mit uniapp bin ich kürzlich auf ein Problem gestoßen: Die zurückgegebenen Bilder wurden nicht angezeigt. Heute werde ich Ihnen hier mitteilen, wie ich dieses Problem gelöst habe.

Zunächst möchte ich uniapp kurz vorstellen. Es handelt sich um ein plattformübergreifendes Anwendungsentwicklungs-Framework, das auf dem Vue.js-Framework basiert und HTML, CSS und JavaScript zum Erstellen von iOS- und Android-Anwendungen verwenden kann. Mit uniapp können wir Code einmal schreiben und auf mehreren Plattformen ausführen, ohne ihn für jede Plattform separat entwickeln zu müssen.

Zurück zum Thema: Wenn ich die Kamera oder Galerie in der App öffne, um ein Foto auszuwählen, kommt das Bild von der Kamera oder Galerie zurück zur App, wird aber nicht in der App angezeigt. Ich habe den Code überprüft und keine Fehler gefunden, daher habe ich beschlossen, zu überprüfen, ob der Pfad zum Bild korrekt ist, denn wenn der Pfad zum Bild falsch wäre, würde das Bild nicht angezeigt.

Als ich den Bildpfad überprüfte, stellte ich fest, dass das Problem bei der Adresse des Bildes lag. In Uniapp verwenden wir im Allgemeinen die Base64-Codierung zum Anzeigen von Bildern. In meiner Anwendung habe ich jedoch keine Base64-Codierung verwendet, sondern den tatsächlichen Pfad des Bildes verwendet. Deshalb wird das Bild nicht richtig angezeigt.

Um dieses Problem zu lösen, muss ich den Code ändern, um die Base64-Codierung zu verwenden. In Vue.js können wir die Methode btoa() verwenden, um Dateien in die Base64-Kodierung zu konvertieren. Hier ist mein geänderter Code:

getLocalImgUrl: function (file) {
  return new Promise((resolve) => {
    var reader = new FileReader();
    reader.onloadend = function () {
      resolve(reader.result);
    }
    reader.readAsDataURL(file);
  })
},

Diese Funktion konvertiert die Datei in die Base64-Kodierung und gibt das base64-kodierte Ergebnis als Zeichenfolge zurück. Nachdem ich das Foto ausgewählt habe, rufe ich diese Funktion auf und speichere die zurückgegebene Base64-Codierung in der Dateneigenschaft der Vue.js-Komponente. Hier ist der geänderte Code:

chooseImage: function () {
  var that = this;
  uni.chooseImage({
    count: 1,
    success: function (res) {
      that.getLocalImgUrl(res.tempFiles[0]).then((result) => {
        that.localImage = result; // 将base64编码的字符串存储在data属性中
      });
    }
  });
},

Wenn ich nun das Foto auswähle und zur App zurückkehre, wird das Bild erfolgreich in der App angezeigt. Dieses Problem wurde behoben.

Zusammenfassend ist Uniapp ein sehr praktisches plattformübergreifendes Anwendungsentwicklungs-Framework. Um die Anwendung erfolgreich zu entwickeln, müssen wir den Code noch einmal überprüfen und sicherstellen, dass die Bildpfade korrekt, Base64-codiert usw. sind. Ich hoffe, dass meine Erfahrung Entwicklern helfen kann, die auf ähnliche Probleme stoßen.

Das obige ist der detaillierte Inhalt vonWas soll ich tun, wenn das von uniapp zurückgegebene Bild nicht angezeigt wird?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!