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

一、本地（一般調用有三種辦法）

<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)
    }

二、服務器調用

一般后台返回的地址是這樣的

 

 我們可以直接使用路徑調用，如：

 

 說明：為什么有的人不能使用不成功呢？

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

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

而static是一些上傳圖片，這些圖片較大，所以一般放着，使用路徑直接訪問就好，如上。

所以，一般我們如果是服務器調用“非項目必須圖片（例如圖標）”資源的話，還是要使用后者。

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

首先，設置常量

 

 

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

然后調用：