vue 調用圖片（服務器和本地）

1、本地（通常調用有三種辦法）

<script>
    //方法1.直接將圖片引入爲模塊
    require imgUrl from "../assets/test.png"

    //方法2.將imgUrl放在數據裏
 data(){ return { imgUrl:require("../assets/test.png") } } //方法3.在生命週期函數中設置
 data(){ return { imgUrl:"" } } created(){ let urlTemp = "assets/test.png"; this.imgUrl = require("@/"+urlTemp) }

2、服務器調用

通常後臺返回的地址是這樣的

 

 咱們能夠直接使用路徑調用，如：

 

 說明：爲何有的人不能使用不成功呢？

這是由於圖片的位置沒有放對，究其緣由是沒有理解VUE兩個資源文件的使用方法。首先src裏面assets是放項目指定圖片的，例如圖標，logo等。而static文件是放靜態資源文件的。

assets是咱們必須使用的，你好比圖片這些，這些圖片會被編碼成64位字符，這樣就能加速項目。且要使用require()。

而static是一些上傳圖片，這些圖片較大，因此通常放着，使用路徑直接訪問就好，如上。

因此，通常咱們若是是服務器調用「非項目必須圖片（例如圖標）」資源的話，仍是要使用後者。

補充：若是調用的資源服務器不是項目同服務器下的資源，那麼就要這樣了：

首先，設置常量

 

 

Vue.prototype.$host = 'http://localhost:8080' // 服務器路徑常量

而後調用：