mui框架下使用vue的html頁面請求服務器端的圖片

場景： html頁面獲取用戶上傳的圖片 並顯示
說明：文件存儲在服務器上的某個文件夾中，文件夾的路徑是數據庫中的一個系統配置，固定的。
解決方法：
1.創建img標籤：

<img v-model="DetailContent.PicName" style="height: 100px;" id="showImg" :src="loadImg"/>

注意 ： src前面有“：”,綁定的是vue對象的一個屬性 ，該屬性回返回一個請求的路徑，本文以mvc的方式請求，即：“/Controller/Action?fileName=”+文件名

2：vue屬性 loadImg：

   var app = new Vue({
            el: "#infoCon",
            data: {
             loadImg: '/Media/LoadImg?fileName=' + localStorage.getItem('img')
            }
            });

說明：localStorage.getItem(‘img’)實在連接到這個頁面的前一個保存的值，這個img是在頁面加載的時候去後臺獲取圖片。
3.後臺接收後的處理

  [HttpGet]
        public ActionResult LoadImg(string fileName)
        {
        	//沒有文件直接返回空
            if (string.IsNullOrEmpty(fileName) || fileName=="null")
                return new EmptyResult();
           ///拼接文件路徑
            var path =  getPicFolderPath()+fileName;
           ///文件不存在 直接返回空
            if (!System.IO.File.Exists(path))
                return new EmptyResult();

            var fileinfo = new FileInfo(path);
            var file = new FileStreamResult(
                new FileInfo(path).OpenRead(),
                fileName.Substring(fileName.LastIndexOf(".", StringComparison.Ordinal) + 1)
            );
            file.FileDownloadName = System.Web.HttpUtility.UrlEncode(fileName, Encoding.UTF8);
              ///返回文件流
            Response.Charset = "utf-8";
            Response.ContentEncoding = Encoding.UTF8;
            Response.AddHeader("Content-Length", fileinfo.Length.ToString(CultureInfo.InvariantCulture));
            Response.ContentType = "application/octet-stream";
            return file;
            
        }