Cara mendapatkan gambar dari api di javascript

Question

Anda dapat menyematkan konten gambar langsung di URL. Anda harus menyiapkan gambar menjadi Tipe Eksternal, dan properti URL-nya harus disetel ke uri data dengan data biner yang dienkode menggunakan base64.

Table of Contents Show

Ambil aset dan url gambar
Isi halaman dengan gambar
Mengubah ukuran gambar
Menambahkan gambar Anda sendiri
Membuat aset
Bagaimana cara mengambil gambar dari respons API?
Bagaimana cara menampilkan gambar dari web API?
Bagaimana cara memuat gambar menggunakan JavaScript?
Bagaimana cara menampilkan gambar dalam JavaScript?

"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIA..."

Kerugian dari pendekatan ini adalah halaman membutuhkan waktu lebih lama untuk dimuat, karena data biner langsung ada di HTML

Alternatif lain adalah memanggil api REST dalam persiapan layar GetImage yang diakhiri dengan alat Download. Anda dapat mengembalikan keluaran biner dari api REST, lalu menggunakan URL untuk layar GetImage Anda sebagai URL Eksternal gambar Anda

Gambar adalah cara yang ampuh untuk menjelaskan konsep, menarik perhatian pembaca, dan menciptakan dampak. Contentful memiliki API Gambar terpisah yang membantu Anda menambah dan mengambil file gambar di ruang, tetapi juga menawarkan fitur manipulasi untuk membuat gambar terlihat seperti yang Anda inginkan

Catatan. Sesuai spesifikasi Batasan Teknis, ukuran gambar yang diunggah tidak boleh melebihi 20MB. Gambar yang melebihi batas ukuran dianggap sebagai dan fitur manipulasi yang ditawarkan oleh API tidak berlaku

Untuk memahami cara terbaik memanipulasi gambar, disarankan agar Anda membuat ruang (dapat mengakibatkan biaya tambahan jika ruang kosong yang tersedia di Anda habis. ) diisi dengan konten dari ruang contoh 'Galeri Foto'

Jika Anda beralih ke tab Media, Anda akan melihat gambar di ruang, perhatikan bahwa sebagian besar berukuran besar, meminta dan memuat masing-masing ke dalam aplikasi Anda akan menjadi hit jaringan dan memori yang signifikan, idealnya Anda ingin meminta gambar di

Biasanya Anda mengambil gambar dari , atau oleh. Agar lebih jelas, kami akan menggunakan aplikasi JavaScript kecil untuk menampilkan fitur gambar Contentful dan bagaimana aset gambar terkait dengan entri konten

Ambil aset dan url gambar

Baca cara menyiapkan dan mengautentikasi aplikasi JavaScript, lalu mengambil aset dari ruang, membuat URL untuk file gambar

client
  .getAssets()
  .then(function (assets) {
    assets.items.map(function (asset) {
      var imageURL = 'https:' + asset.fields.file.url;
    });
  })
  .catch(function (e) {
    console.log(e);
  });

_

Buat indeks kerangka. html untuk menampilkan gambar. Contoh di bawah ini digunakan untuk digunakan di browser

Catatan. Langkah ini tidak diperlukan jika Anda menggunakan pustaka klien langsung di luar browser

<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="bundle.js"></script>
    <meta charset="UTF-8" />
    <title>Images Example</title>
  </head>
  <body>
    <div id="images"></div>
  </body>
</html>

Isi halaman dengan gambar

Di dalam

<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="bundle.js"></script>
    <meta charset="UTF-8" />
    <title>Images Example</title>
  </head>
  <body>
    <div id="images"></div>
  </body>
</html>

_1 loop, buat elemen

<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="bundle.js"></script>
    <meta charset="UTF-8" />
    <title>Images Example</title>
  </head>
  <body>
    <div id="images"></div>
  </body>
</html>

2 untuk setiap aset,

<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="bundle.js"></script>
    <meta charset="UTF-8" />
    <title>Images Example</title>
  </head>
  <body>
    <div id="images"></div>
  </body>
</html>

3 elemen untuk memuatnya, dan isi

<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="bundle.js"></script>
    <meta charset="UTF-8" />
    <title>Images Example</title>
  </head>
  <body>
    <div id="images"></div>
  </body>
</html>

4

<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="bundle.js"></script>
    <meta charset="UTF-8" />
    <title>Images Example</title>
  </head>
  <body>
    <div id="images"></div>
  </body>
</html>

3 dengannya

...
var imagesDiv = document.getElementById('images');

assets.items.forEach(function (asset) {
  var imageURL = 'https:' + asset.fields.file.url;
  var imageDiv = document.createElement("div");
  var imageFile = document.createElement("img");
  imageFile.src = imageURL;
  imageDiv.appendChild(imageFile);
  imagesDiv.appendChild(imageDiv);
});
...

_

Ini menghasilkan halaman gambar besar, dalam hal dimensi dan ukuran file

Sekarang strukturnya sudah siap, saatnya bereksperimen dengan fitur manipulasi Contentful

Mengubah ukuran gambar

Anda dapat mengubah ukuran gambar dengan menambahkan parameter ke url gambar yang menetapkan lebar, tetapi juga akan mempertahankan rasio aspek

...
assets.items.forEach(function (asset) {
  ...
  var imageURL = 'https:' + asset.fields.file.url + '?w=200';
  ...
});
...

_

Menyetel lebar dan tinggi gambar akan tetap mempertahankan rasio aspek, sehingga kode di bawah ini akan menghasilkan keluaran yang sama seperti contoh sebelumnya dan mungkin bukan ukuran persis seperti yang Anda harapkan

...
assets.items.forEach(function (asset) {
  ...
  var imageURL = 'https:' + asset.fields.file.url + '?w=200&h=200';
  ...
});
...

Jika Anda ingin mengesampingkan perilaku ini, Anda dapat menggunakan parameter

<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="bundle.js"></script>
    <meta charset="UTF-8" />
    <title>Images Example</title>
  </head>
  <body>
    <div id="images"></div>
  </body>
</html>

6 untuk mengontrol bagian mana dari gambar yang dikembalikan Contentful

Contoh ini membuat thumbnail gambar dari sudut kiri atas gambar

...
assets.items.forEach(function (asset) {
  ...
  var imageURL = 'https:' + asset.fields.file.url + '?fit=thumb&f=top_left&h=200&w=200';
  ...
});
...

Parameter

<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="bundle.js"></script>
    <meta charset="UTF-8" />
    <title>Images Example</title>
  </head>
  <body>
    <div id="images"></div>
  </body>
</html>

_6 dapat mengambil nilai lain untuk mengubah perilaku ini dan sesuai dengan kasus penggunaan Anda,

Saat memotong atau mengubah ukuran gambar, Anda dapat membulatkan sudut dengan parameter

<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="bundle.js"></script>
    <meta charset="UTF-8" />
    <title>Images Example</title>
  </head>
  <body>
    <div id="images"></div>
  </body>
</html>

8. Jika Anda ingin menghasilkan gambar bulat tanpa menggunakan CSS, setel nilainya ke

<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="bundle.js"></script>
    <meta charset="UTF-8" />
    <title>Images Example</title>
  </head>
  <body>
    <div id="images"></div>
  </body>
</html>

9

...
assets.items.forEach(function (asset) {
  ...
  var imageURL = 'https:' + asset.fields.file.url + '?fit=thumb&f=top_left&h=200&w=200&r=180';
  ...
});
...

Menambahkan gambar Anda sendiri

Anda dapat menambahkan gambar ke ruang Anda menggunakan aplikasi web, yang menyediakan beragam metode lengkap untuk mengunggah file

Menambahkan gambar melalui API manajemen konten melibatkan tiga panggilan API terpisah, yang diekspos oleh semua pustaka klien

Membuat aset, yang merupakan entri untuk file media
Memproses aset, Contentful mengunduh file media dari URL yang disediakan dan memprosesnya
Menerbitkan aset, membuat entri dan file media tersedia untuk umum

Membuat aset

Otentikasi dan buat klien Contentful, kali ini menggunakan pustaka klien manajemen saat Anda ingin membuat konten

Dapatkan ruang dan lingkungan tempat Anda ingin menambahkan aset

client.getSpace('idpvf88znfe3')
.then((space) => space.getEnvironment('master'))
  .then((environment) => {
    ...
  });

Di dalam metode

...
var imagesDiv = document.getElementById('images');

assets.items.forEach(function (asset) {
  var imageURL = 'https:' + asset.fields.file.url;
  var imageDiv = document.createElement("div");
  var imageFile = document.createElement("img");
  imageFile.src = imageURL;
  imageDiv.appendChild(imageFile);
  imagesDiv.appendChild(imageDiv);
});
...

_0 buat objek data yang berisi informasi tentang gambar yang ingin Anda unggah ke Contentful, termasuk judul aset, dan data tentang file gambar itu sendiri

var fileData = {
  fields: {
    title: {
      'en-US': 'Berlin',
    },
    file: {
      'en-US': {
        contentType: 'image/jpeg',
        fileName: 'berlin_english.jpg',
        upload:
          'https://upload.wikimedia.org/wikipedia/commons/3/3b/Siegessaeule_Aussicht_10-13_img4_Tiergarten.jpg',
      },
    },
  },
};

Buat aset di lingkungan

environment.createAsset(fileData)
  .then(function (asset) {
    ...
  })

Ini akan membuat aset siap diproses dan dipublikasikan di dalam metode

...
var imagesDiv = document.getElementById('images');

assets.items.forEach(function (asset) {
  var imageURL = 'https:' + asset.fields.file.url;
  var imageDiv = document.createElement("div");
  var imageFile = document.createElement("img");
  imageFile.src = imageURL;
  imageDiv.appendChild(imageFile);
  imagesDiv.appendChild(imageDiv);
});
...

0

<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="bundle.js"></script>
    <meta charset="UTF-8" />
    <title>Images Example</title>
  </head>
  <body>
    <div id="images"></div>
  </body>
</html>

0

Buka ruang dan Anda akan melihat gambar baru di dalamnya

Jika Anda memuat halaman gambar yang Anda buat sebelumnya lagi, Anda sekarang juga akan melihat gambar baru yang tercantum di samping gambar yang ada

Bagaimana cara mengambil gambar dari respons API?

Untuk mengambil gambar dari API dengan React, kita bisa menggunakan fungsi ambil . Kami memanggil pengambilan dengan imageUrl untuk membuat permintaan GET. Lalu kita panggil res. blob untuk mengonversi objek respons menjadi blob.