如何将服务器中的图片显示出来并实现删除。

<div id="div2" style="display:none">
        <img width="450" height="200" id="img1" alt="无图片" style="display: block; position: relative; margin: auto;" />
        <input type="button" name="name" value="删除该图片" id="delImage01" onclick="delImage1()"
               style="display: block; position: relative; margin: auto;" class="btn btn-primary dropdown-text" />
        <br />
        <img width="450" height="200" id="img2" alt="无图片" style="display: block; position: relative; margin: auto;" />
        <input type="button" name="name" value="删除该图片" id="delImage02" onclick="delImage2()"
               style="display: block; position: relative; margin: auto;" class="btn btn-primary dropdown-text" />
        <br />
        <img width="450" height="200" id="img3" alt="无图片" style="display: block; position: relative; margin: auto;" />
        <input type="button" name="name" value="删除该图片" id="delImage03" onclick="delImage3()"
               style="display: block; position: relative; margin: auto;" class="btn btn-primary dropdown-text" />
    </div>

界面这样的：

我们先显示图片：
JavaScript定义一个函数在数据库中先把图片的url查出来，然后把url直接绑定到图片的src。

function getImageInfo() {
        var keyValue = $.request("keyValue");
        if (!!keyValue) {
            $.ajax({
                url: "/Records/List/GetImage",
                data: { keyValue: keyValue },
                dataType: "json",
                async: false,
                success: function (data) {
                    $("#img1").attr("src", data.ImageUrl);
                    $("#img2").attr("src", data.ImageUrl2);
                    $("#img3").attr("src", data.ImageUrl3);
                }
            }); 
        }
    }

控制器的GetImage方法：

[HttpGet]
        public ActionResult GetImage(string keyValue)
        {
            try
            {
            //后台查找该Id的相关数据data，data是这条Id的所有数据
                var data = this.CreateService<IIssueListAppService>().GetIssueListById(keyValue).First();

                return Content(data.ToJson());
            }
            catch (Exception )
            {
                return null;
            }
        }

后台查数据的代码我就不用写了，框架都有的。用sql写或者lambda表达式都是可以的。
这样就可以直接显示相关的图片在页面中了。
效果图：

注明：数据库没有路径的就不显示图片（限制为最多三张图片，所以数据库直接定义三个字段用来分别存三个图片的url即可）。
然后就是实现删除。
删除的方法：
JavaScript定义一个函数：

function delImage1 () {
        var keyValue = document.getElementById('Id').value;
        var Url1 = document.getElementById('ImageUrl').value;

        if (!!keyValue) {

            $.deleteForm({
                url: "/Records/List/DelUrl1",
                param: { keyValue: keyValue, Url1: Url1 },
                success: function () {
                    location.reload();
                }
            })
        }

    }

参数中keyValue 是本条数据的Id，Url1 是第一张图片的url路径。目的是判断有没有再执行删除操作。
控制器中就写删除代码了。

[HttpPost]
        [ValidateAntiForgeryToken]
        public ActionResult DelUrl1(string keyValue, string Url1)
        {
        //删除数据库中的url1，其实就是把url更新成空，删除代码我就不写了，框架都有，跳到AppService就可以删除。
            this.CreateService<IIssueListAppService>().UpdateImageUrl_Del(keyValue);
            //删除服务器中的图片，这一步一定要有，为了让服务器效率高。
            if (Url1 != null)
            {
                            System.IO.File.Delete(Server.MapPath(Url1));
            }
            return Success("删除成功。");
        }

删除完了在页面刷新一下。
完成。
效果图：