1. 程式人生 > >在客戶端展示本地圖片

在客戶端展示本地圖片

gif stream urn 控制器 地圖 string 添加 控制 lpar

當用戶在客戶端上請求本地圖片的時候,我們需要把本地的圖片展示。

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="[email protected]"/>
Html

是不是感覺Html裏面很奇怪,<img src="/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返回的是文件。


註:此篇隨筆只供參考使用,而且也有很多小瑕疵,最主要的不是代碼,邏輯才是最重要的。

在客戶端展示本地圖片