vue-cli 3.0 圖片路徑問題（何時使用 public 文件夾）

1. 圖片放入public文件夾下時

參考：https://cli.vuejs.org/zh/guide/html-and-static-assets.html#public-%E6%96%87%E4%BB%B6%E5%A4%B9

任何放置在 public 文件夾的靜態資源都會被簡單的復制，而不經過 webpack。你需要通過絕對路徑來引用它們。

例如，在public文件下放置一個images文件夾，images里面存放各種圖片：

引入圖片logo.png:

<img src="/images/logo.png" alt="" width="100px"> 

在 css 中 設置背景圖片：

.login-wrapper {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  background: #1ab2ff url('/images/bg-img-4.jpg');
}

注意:

public 目錄提供的是一個應急手段，當你通過絕對路徑引用它時，留意應用將會部署到哪里。如果你的應用沒有部署在域名的根部，那么你需要為你的 URL 配置 publicPath 前綴。

何時使用 public 文件夾

你需要在構建輸出中指定一個文件的名字。
你有上千個圖片，需要動態引用它們的路徑。
有些庫可能和 webpack 不兼容，這時你除了將其用一個獨立的

刷新評論 刷新頁面 返回頂部