
炸灰鯧與香茅蔬菜沙拉
嵌進你的網站
圖片網址
路徑帶內容雜湊,內容永遠不變,可以無限期快取。
https://img.rickywang.live/media/b0/9c/b09c7ccb58187bdaef352e48bae42f71f941fbb86f06b004dec66846b651d089/orig.jpg原生 <img>
已帶 srcset 三種尺寸與 width/height,瀏覽器自己挑、也不會有版位跳動。
<img
src="https://img.rickywang.live/media/b0/9c/b09c7ccb58187bdaef352e48bae42f71f941fbb86f06b004dec66846b651d089/orig.jpg"
srcset="https://img.rickywang.live/media/b0/9c/b09c7ccb58187bdaef352e48bae42f71f941fbb86f06b004dec66846b651d089/w640.jpg 640w, https://img.rickywang.live/media/b0/9c/b09c7ccb58187bdaef352e48bae42f71f941fbb86f06b004dec66846b651d089/orig.jpg 1108w"
sizes="(min-width: 768px) 720px, 100vw"
width="1108" height="1477"
alt="炸灰鯧搭配香茅綜合蔬菜沙拉和南薑醬汁"
loading="lazy" decoding="async" />Next.js <Image>
用 next/image 的話,記得把圖庫網域加進 next.config 的 remotePatterns,否則正式版會 400。
<Image
src="https://img.rickywang.live/media/b0/9c/b09c7ccb58187bdaef352e48bae42f71f941fbb86f06b004dec66846b651d089/orig.jpg"
width={1108} height={1477}
alt="炸灰鯧搭配香茅綜合蔬菜沙拉和南薑醬汁"
placeholder="blur"
blurDataURL="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABA…" /* 完整字串見下方「模糊佔位」 */
/>模糊佔位(blurDataURL)
約 400~900 bytes 的 base64,內嵌即可,不需要額外請求。
data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDABIMDRANCxIQDhAUExIVGywdGxgYGzYnKSAsQDlEQz85Pj1HUGZXR0thTT0+WXlaYWltcnNyRVV9hnxvhWZwcm7/2wBDARMUFBsXGzQdHTRuST5Jbm5ubm5ubm5ubm5ubm5ubm5ubm5ubm5ubm5ubm5ubm5ubm5ubm5ubm5ubm5ubm5ubm7/wAARCAAgABgDASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwDmoQGt2FVIYmefCLk1p6fpd1P8oXaD/e4qx/ZkumXGWdWLdhSuOxjzWVwgLGM4orcbVI7ZCkq7j6EUUk32G0jZ1mIwyK6Ntz2FVUkhB3yHc3vXQXNvHOhdlywHFZtlpMLgySgk56GskrSNOa6sypqdpb6lYGWKMLKnt1orUvY44bRigwAO1Fap2M+VvY//2Q==