首页 > 代码库 > 在客户端展示本地图片

在客户端展示本地图片

2024-11-20 04:39:02   203人阅读

当用户在客户端上请求本地图片的时候，我们需要把本地的图片展示。

1.在控制器端把图片转换成流的形式

2.前台请求控制器端的方法，输出图片

控制器端：

技术分享 
 public class ImageController : Controller {
        private static readonly string PATH = @"C:\Users\xiechongxi\Desktop\";
        //这个key就是图片的名字和后缀名
        public ActionResult GetImage(string key) {
            //path就包含了路径和文件名，后缀
            string path = Path.Combine(PATH, key);
            //ext是用GetExtension方法获取路径的后缀名
            string ext = System.IO.Path.GetExtension(path);
            //判断这个路径是否有图片
            if (System.IO.File.Exists(path)) {
                //通过http返回一个image类型的文件
                using (FileStream fs = System.IO.File.OpenRead(path)) {
                    return File(StreamToBytes(fs), "image/" + ext);
                }
            }
            else {
                return null;
            }
        }

        private byte[] StreamToBytes(Stream stream) {
            byte[] bytes = new byte[stream.Length];
            stream.Read(bytes, 0, bytes.Length);
            // 设置当前流的位置为流的开始
            stream.Seek(0, SeekOrigin.Begin);
            return bytes;
        }
    }
Cotroller

前台获取：

技术分享 
//image表示的是ImageCotroller，@scene.LocalKey表示的是文件名，包含后缀名
<img src="/image/@scene.LocalKey"/>
Html

是不是感觉Html里面很奇怪，<img src="http://www.mamicode.com/image/40ed9c2c-1d1c-470c-a760-7f860e9c309c.jpg">这种形式

实际上为了美观更改了路由，可以参考一下以下路由设置

技术分享 
public static void RegisterRoutes(RouteCollection routes) {
            routes.IgnoreRoute("{resource}.axd/{*pathInfo}");

            routes.MapRoute(
                "Image",//路由名称
                "Image/{key}",
                new { controller = "Image", action = "GetImage" }
            );

            routes.MapRoute(
                "Default", // 路由名称
                "{controller}/{action}/{id}", // 带有参数的 URL
                new { controller = "Follow", action = "Index", id = UrlParameter.Optional } // 参数默认值
            );

        }
路由设置

新添加的路由一定要放在默认路由上面，这里有个优先级，我也就不多说。

 

流程是这样的img标签里面的src后面这个地址，是请求ImageCotroller中的GetImage方法（路由设置效果），并且传递参数（文件名和后缀），然后GetImage返回的是文件。

 

 


注：此篇随笔只供参考使用，而且也有很多小瑕疵，最主要的不是代码，逻辑才是最重要的。

在客户端展示本地图片


联系
我们