若依显示MySql数据库中图片

在上一篇文章中，简单介绍了使用若依框架创建自定义的功能，展示自定义的数据，在上一篇的例子中，我的MySQL中存放的是二进制的图片数据，不是图片的地址，因而展示时会出现未解析的数据乱码。本例中，MySQL中存放的是图片的路径，而非图片的二进制数据。

上一篇文章链接：http://t.csdn.cn/eLWm8

一、修改图片存储地址

使用若依显示图片，首先要确保你的图片存放的地址正确，否则这整个项目找不到图片路径。在application.yml配置文件中，有默认的文件存放路径，你需要将图片放到该文件夹下，或者修改这个路径成你现在自定义存放的路径。

我在跟项目同步的文件夹下放了一张图片，并在另外两个地方也放了这张图片，/profile相当于配置文件中的D:/ruoyi/uploadPath

最终显示效果是这样的，只有最后一个和项目设置相对应的路径的图片才可以正常显示

二、修改数据显示页面

找到数据显示页面的html文件，上一篇文章创建的facetest.html文件，找到对应数据库关键字的元素，我在数据库字段名为data下存放的图片路径，在其中添加下列语句，返回一个图片元素，在网页上显示

  formatter: function (value, row, index) {
                        return '<img src="' + value + '" width="75" height="75">';
                    }

三、修改添加图片页面

找到添加数据的html页面，在添加数据的<input>输入标签下，插入一个<img>标签，再插入一个<input>标签，让其type='file'，选择文件上传。<img>标签中的th:src="*{data}"，中的data，是数据库中图片地址的字段名，不懂填什么的话，直接和上面那个<input>标签中的name值一样就行了

    <a id="url"><img th:src="*{data}" style="width: 90px;height: 90px"></a>
    <input type="file" id="abc">

再在add.html下面的<script>标签中，新增以下内容，原本的<script>中的内容不要删掉，否则可能会无法提交数据

var prefix = ctx + "system/student";
        $("#abc").change(function () {
            var data = new FormData();
            data.append("file", $("#abc")[0].files[0]);
            $.ajax({
                type: "POST",
                url: ctx + "common/upload",
                data: data,
                cache: false,
                contentType: false,
                processData: false,
                dataType: 'json',
                success: function(result) {
                    // alert(JSON.stringify(result))
                    if (result.code == web_status.SUCCESS) {
                        $("#url img").attr("src",result.fileName)
                        $("#pic").val(result.fileName)
                    }
                },
                error: function(error) {
                    alert("图片上传失败。");
                }
            });
        })

四、效果展示

显示图片的效果在开头展示过了，下面展示增加图片的效果

改进空间：增加图片时，又要输入图片地址又要选择图片文件，可以改进成选择图片后，自动选择图片的路径，不用再输入图片地址