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