全屏圖片是網頁設計中常用的一種效果，可以讓用戶享受到更好的視覺體驗。在Vue組件中，實現全屏圖片需要進行一系列的操作，下面我們來詳細了解一下。

首先，我們需要引入Vue的官方插件Vue-Resource，然后使用它提供的$resource方法來進行圖片的獲取。代碼如下：

import Vue from 'vue'
import VueResource from 'vue-resource'
Vue.use(VueResource)
const resource = Vue.resource('http://example.com/image')

這樣我們就可以通過resource.get方法來獲取圖片資源了。獲取到圖片后，我們需要將其放置在頁面中合適的位置，并以全屏的方式展示出來。下面的代碼展示了如何利用Vue的template語法來實現這個效果：

這段代碼中，我們首先創建了一個div元素，將其定位后并設置了背景顏色。在這個div元素中，我們使用了Vue的條件渲染指令v-if和v-else。在圖片加載完成后，我們會將imageLoaded屬性設置為true，此時v-if會將img元素渲染出來；在圖片未完成加載的時候，v-else會渲染出“Loading...”的提示語。然后我們使用Vue的mounted生命周期鉤子來獲取圖片資源，并將其綁定到img元素的src屬性上。

最后，我們需要使用CSS來設置img元素的樣式，以充分實現全屏效果。我們將其設置為絕對定位，并使其填充整個屏幕。同時，我們為其設置了object-fit: contain，讓圖片始終按比例填充整個屏幕，避免圖片變形。通過這些代碼的編寫，我們就可以實現一個簡單的全屏圖片組件了。