整合動詞圖雲

使用規範

網頁（HTML / JavaScript）

使用 <img> 標籤嵌入圖片

在 HTML 中嵌入圖片時，請加上 referrerpolicy 屬性，確保瀏覽器正確傳送 Referer 標頭，圖片才能順利顯示。

<img
  src="https://i.verb.tw/aBcD1234.jpg"
  referrerpolicy="no-referrer-when-downgrade"
  alt="圖片描述"
/>

使用 fetch() 下載圖片

const response = await fetch('https://i.verb.tw/aBcD1234.jpg');
const blob = await response.blob();
const url = URL.createObjectURL(blob);

const a = document.createElement('a');
a.href = url;
a.download = 'aBcD1234.jpg';
a.click();
URL.revokeObjectURL(url);

在 Next.js / React 中使用

// 一般 <img> 標籤
<img
  src="https://i.verb.tw/aBcD1234.jpg"
  referrerPolicy="no-referrer-when-downgrade"
  alt="圖片描述"
/>

// Next.js <Image> 元件（需設定 remotePatterns）
// next.config.js
images: {
  remotePatterns: [
    { protocol: 'https', hostname: 'i.verb.tw' },
  ],
}

iOS（Swift）

iOS 的 URLSession 預設不帶 Sec-Fetch-Dest，動詞圖雲會視為合法的 App 請求，可直接存取，無需額外設定。

URLSession 原生下載

let url = URL(string: "https://i.verb.tw/aBcD1234.jpg")!
var request = URLRequest(url: url)
request.httpMethod = "GET"
// 請使用 GET，勿使用 HEAD

let (data, _) = try await URLSession.shared.data(for: request)
let image = UIImage(data: data)

使用 Kingfisher

import Kingfisher

let url = URL(string: "https://i.verb.tw/aBcD1234.jpg")
imageView.kf.setImage(with: url)

使用 SDWebImage

import SDWebImage

let url = URL(string: "https://i.verb.tw/aBcD1234.jpg")
imageView.sd_setImage(with: url)

使用 Nuke

import Nuke
import NukeUI

// SwiftUI（推薦）
LazyImage(url: URL(string: "https://i.verb.tw/aBcD1234.jpg"))

// UIKit
let url = URL(string: "https://i.verb.tw/aBcD1234.jpg")!
Nuke.loadImage(with: url, into: imageView)

Android（Kotlin）

Android 主流圖片載入函式庫預設使用 GET 請求，且不帶 Sec-Fetch-Dest，與動詞圖雲完全相容，可直接使用。

使用 Coil（推薦）

// build.gradle.kts
implementation("io.coil-kt:coil-compose:2.6.0")

// Jetpack Compose
AsyncImage(
    model = "https://i.verb.tw/aBcD1234.jpg",
    contentDescription = "圖片描述",
)

使用 Glide

Glide.with(context)
    .load("https://i.verb.tw/aBcD1234.jpg")
    .into(imageView)

使用 OkHttp 直接下載

val client = OkHttpClient()

val request = Request.Builder()
    .url("https://i.verb.tw/aBcD1234.jpg")
    .get() // 明確使用 GET，避免函式庫預設 HEAD
    .build()

client.newCall(request).enqueue(object : Callback {
    override fun onResponse(call: Call, response: Response) {
        val bytes = response.body?.bytes()
        val bitmap = BitmapFactory.decodeByteArray(bytes, 0, bytes!!.size)
    }
    override fun onFailure(call: Call, e: IOException) {
        // 處理錯誤
    }
})

常見問題