關於為vue的圖片添加前綴地址

今天在做項目的分頁功能時，遇到了一個問題。在項目中，我抽離了微博組件，並利用 props，使其只需要傳入一個微博數組便可將其轉換成微博列表展示出來。對於其中的圖片，我先前采用對數組 for 循環添加前綴，來使其找到對應的路徑。

但是，當我使用分頁時，因我在第一頁已對數組中的圖片添加了地址，當我加載第二頁時，又對其第一頁的圖片添加了地址，於是圖片地址便產生了錯誤。

在思考了一段時間后，我便嘗試把 img 標簽的 :src 從原先的微博.圖片名修改成地址/微博.圖片名，試了試，完美。

原代碼

<div
      v-for="weibo of weiboList"
      ...
    >
    ...
    <img alt="頭像" title="頭像" :src="weibo.userHead" />
    ...
</div>

現代碼

<div
      v-for="weibo of weiboList"
      ...
    >
    ...
    <img alt="頭像" title="頭像" :src="`${publicPath}img/${weibo.userHead}`" />
    ...
</div>

 以及，原以為分頁功能很難做所以一直沒做，現在做了一下，感覺是真的很簡單，只需要多存儲一個當前頁面頁碼就好了。