首先

你不應(yīng)該用相對路徑去引用 static 目錄下的資源
可以看出你這個項目是 Vue CLI 2.x 腳手架創(chuàng)建出來的項目。這個項目下的 static 目錄意圖是用于存放某些靜態(tài)資源，這些資源是不會被 webpack 打包處理的，只是會被單純的拷貝。但是如果你使用相對路徑去引用這些資源，它們就會被 webpack 處理了（minify、uglify、轉(zhuǎn)base64等），這便與原始的目的違背了。

1. 如果你是想這些資源被 webpack 處理，那么你應(yīng)該將 static 目錄下的資源放到 src/assets 目錄下，再通過相對路徑引用這些資源。
2. 如果你是想這些資源不被 webpack 處理，那么你可以保持現(xiàn)在的目錄，不過引用這些資源的時候請用絕對路徑，就問題中的例子來說就是 /static/image/img.png（注意要以 / 開頭）

回到問題上

可以通過設(shè)置 alias 來方便相對路徑的引用

// webpack.base.conf.js
resolve: {
    alias: {
      '@': resolve('src'),
      '@img': '@/src/assets/image'
    }
  }

然后在 <template> 中使用

<img src="@img/img.png"/>

在 scss 文件中使用

.icon-test {
    background: url("~@img/img.png");
}

要注意的是，使用 alias 的路徑會被 webpack 處理，這就是為什么我把路徑改成 src/assets 了；

至于為什么用 ~@ 以及其他相關(guān)內(nèi)容可以參考：
Vue CLI webpack 模板關(guān)于靜態(tài)資源的描述 和一篇針對 Vue CLI 搭建項目路徑相關(guān)問題的描述

webpack的alias用的上

resolve: {
    alias: {
      '@': resolve('src'),
      'imagePath': '@/src/stactic/image'
    }
  }