在客户端展示本地图片

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

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="/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返回的是文件。

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

时间: 2024-11-05 05:20:38

在客户端展示本地图片的相关文章

Android 使用ContentProvider扫描手机中的图片,仿微信显示本地图片效果

首先我们先看第一个界面吧,使用将手机中的图片扫描出来,然后根据图片的所在的文件夹将其分类出来,并显示所在文件夹里面的一张图片和文件夹中图片个数,我们根据界面元素(文件夹名, 文件夹图片个数,文件夹中的一张图片)使用一个实体对象ImageBean来封装这三个属性 package com.example.imagescan; /** * GridView的每个item的数据对象 * * @author len * */ public class ImageBean{ /** * 文件夹的第一张图片路

将摄像头拍摄图像或者本地图片设置为头像的方法

一:效果图 效果描述:点击相框,将手机摄像头拍摄的图片或者本地图片设置为我们定义的头像 功能控件:UIImageView , UIAlertController , UITapGestureRecognizer , UIImagePickerController 首次运行的时候会提醒是否允许程序访问手机相册,点击ok     二:工程图 三:代码区 AppDelegate.h #import <UIKit/UIKit.h> @interface AppDelegate : UIResponde

注册登录时本地图片验证码

在一些公司的项目中,为了避免刷注册量等,大多数人会采取绘制本地图片验证码来减少这些操作. 这样注册时,不仅需要判断手机验证码,还要判断一次本地的图片验证码. 首先展示下效果图: 点击获取手机验证码时或者填写完基本信息点击注册按钮时,都会判断图片验证码是否正确,不正确的话晃动验证码,改变图片内容. 其实图案内容和那几个线都是绘制出来的,图案内容,线的长度,背景颜色,线的颜色都是随机变化的. 实现绘制验证码的方法是: #import <UIKit/UIKit.h> @interface Captc

java+js实现展示本地文件夹下的所有图片demo

java+js实现展示本地文件夹下的所有图片demo 最近项目遇到需要实现前端通过一个按钮点击事件,弹窗浏览本地文件夹下的所有图片: 思路: - 获取到所需展示图片的本地文件夹内所有图片的文件绝对路径名称(路径+图片名称.格式名称) - 由于图片过大,对图片进行按比例压缩再展示 - 在前端展示图片 - (前端各式各样的展示--) 第一步:获取本地文件夹中的所有图片路径 java代码: package com.giscafer.common; import java.io.File; import

[Android] 通过GridView仿微信动态添加本地图片

    前面文章讲述的都是"随手拍"中图像处理的操作,此篇文章主要讲述GridView控件实现添加本地图片并显示.主要是关于GridView控件的基本操作,通常可以通过自定义继承BaseAdapter的适配器加载图片,而下面讲述的不是自定义的适配器,而是调用SimpleAdapter实现的.至于上传发布与网络交互此处不讲述,后面文章会讲! 一. 实现效果     主要是通过点击+从本地相册中添加图片,同时显示图片至GridView.点击图片可以进行删除操作,同时界面中的发布EditVi

在InternetExplorer.Application中显示本地图片

忘记了,喜欢一个人的感觉 Demon's Blog  ?  程序设计  ?  在InternetExplorer.Application中显示本地图片 ? 对VBS效率的再思考--处理二进制数据 WordPress判断用户是否登录 ? 在InternetExplorer.Application中显示本地图片 标题: 在InternetExplorer.Application中显示本地图片作者: Demon链接: http://demon.tw/programming/internetexplor

xheditor1.1.14在asp.net网站开发中作为可上传本地图片的在线编辑器

xheditor是一个基于jQuery开发的跨平台轻量可视化XHTML编辑器,功能强大,使用方便,CSDN网站的发表文章网页就使用了该编辑器,下面介绍在vs2013的环境下开发网页时使用该编辑器并实现本地图片上传的一种方法. 1.网上搜索并下载文件xheditor1.1.1文件包,解压后应该是一个包括jquery.xheditor_emo.t xheditor_plugins. xheditor_skin.demos等文件夹及xheditor-1.1.14-zh-cn.min.js等文件的一个文

android 获取本地图片(一)

我的前面几个博文中已经介绍过了如何获取本地图片和Bitmap.软引用.弱引用的使用方法.在这两个博文当中针对一个完整的Demo示例给大家讲解获取本地图片的非常有效.也是安卓官方推荐的方法. **源代码在博文最后可以下载**. 不知道怎么回事,近来csdn写博文上传图片错误,不能上传图片,所以给不了大家效果图.我就文字介绍好了.整个Demo只有一个Activity中完成,加载本地图片在GridView中进行显示,同时点击每个图片可以对图片进行选中的操作,每个item图片右上角会给出对号的提示,表示

android 获取本地图片(二)

链接上一篇博文 本篇博文接着讲述本地图片的获取. 下面给出获取本地图片的异步线程类LoadLoacalPhotoCursorTask的代码: /** * 获取本地图片的异步线程类 */ public class LoadLoacalPhotoCursorTask extends AsyncTask<Object, Object, Object> { private Context mContext; private final ContentResolver mContentResolver;