QImg 元件讓處理圖片（任何圖片格式）變得容易，並且還為其添加了不錯的載入效果以及許多其他功能（範例：設定長寬比的能力）。
用法
基本
長寬比
標題
圖片樣式
在以下範例中，我們添加了模糊和棕褐色效果。此外，我們還使用了 rounded-borders CSS 輔助類別。
Fit 模式
可以透過 fit 屬性以多種方式顯示圖片：「cover」、「fill」（預設值）、「contain」、「none」、「scale-down」。它基本上與稱為 object-fit 的 CSS 屬性相同。
某些模式會在圖片旁邊產生空白空間（水平或垂直）。
您也可以透過 position 屬性設定位置，這相當於 CSS object-position 屬性。其預設值為「50% 50%」。
載入狀態
當您有大型圖片時，可以使用佔位符圖片（建議以 base64 編碼指定），如下例所示。佔位符將顯示，直到目標圖片載入完成。我們正在切換 QImg 標籤，以便您可以看到佔位符圖片的作用。
響應式
警告
為了掌握 sizes 和 srcset 屬性，請閱讀關於 響應式圖片的原生支援，因為 QImg 完全依賴於此。
提示
對於 sizes 屬性，請閱讀關於解析度切換：不同的尺寸。
提示
對於 srcset 屬性，請閱讀關於解析度切換：相同尺寸，不同解析度。
按需渲染
對於原生支援 loading=“lazy” DOM 屬性的瀏覽器，您可以利用它。Quasar 將使用它並告知瀏覽器僅在圖片目前顯示在螢幕上（或當它滾動到螢幕中時）才請求圖片並渲染它。
另一種替代方案是使用 QIntersection 元件作為包裝器或 Intersection 指令。
無原生上下文選單
在以下範例中，我們停用了圖片上的原生上下文選單。
警告
當您使用此選項時，請務必注意將 default 或 error 插槽的內容包裝在 div 元素中，或在元素上添加 all-pointer-events 類別。