vue 動態設置靜態資源圖片的三種方式

問題：

Vue項目中，不能直接使用動態的圖片資源路徑。

 <!-- OK 編譯前設置 ↓ -->
 <img src="../assets/images/banner_1.png" />
 
 <!-- NG 編譯后設置 ↓ -->
 <img :src="url" />

解決方法：

• 方法一： 將圖片放到public目錄下后，直接引用

export default {
  data() {
    return {
      url: 'banner_1.png'
    }
  },
}

• 方法二： require方式引用

export default {
  data() {
    return {
      url: require(`../assets/images/banner_1.png`)
    }
  },
}

• 方法三： import方式引用

import imgPath from '../assets/images/banner_1.png'

export default {
  data() {
    return {
      url: imgPath
    }
  },
}