请教下tomcat怎么读取本地的图片，从数据库获得的地址就是绝对路径。

454545454545454 2018-06-13 03:36:08


从数据库获得的数据就是绝对路径


数据库数据不能更改
handleEdit: function () {

            $content.on('click', '.page-unit button[id="viewimage"]', function () {

                var $unitform = $('#unitForm');

                var rowdata = oTable.row($(this).closest('tr')).data();

                $unitform.find("img[name='imgView']").attr("src",rowdata.largefilename+"\\"+rowdata.imgfilename);



               /* $unitform.find("img[name='imgView']").attr("src","/image/"+rowdata.imgfilename);*/



                $unitform.modal('show');



            });

        },

使用的jquery datatable
//初始化表格,

            oTable = $('#imageTable').DataTable($.po('dataTable', {

                autoWidth: false, //禁用自动调整列宽

                processing: true,  //隐藏加载提示,自行处理

                serverSide: true,   //启用服务器端分页

                searching: false,   //禁用原生搜索

                sort: false,

                pagingType: "simple_numbers",   //分页样式：

                //列表表头字段

                columns: [

                    {

                        "render": function () {

                            var checkbox = '<span class="checkbox-custom checkbox-primary">' +

                                '<input type="checkbox" class="contacts-checkbox selectable-item" >' +

                                '<label></label></span>';

                            return checkbox;

                        }

                    },

                    {

                        "data": null,

                        "render": function (data, type, row, meta) {

                            var startIndex = meta.settings._iDisplayStart;

                            return startIndex + meta.row + 1;

                        }

                    },

                    {"data": "xm"},

                    {"data": "sfzh"},

                    {"data": "jdah"},

                    {"data": "fsmachineip"},

                    {"data": "largefilename"},

                    {"data":"imgfilename"},

                    {"data": "subtype"},

                    {"data": "batchid"},

                    {"data": "subtypeid"},

                    {

                        "render": function (data, type, row, meta) {

                            var edit = '<button type="button" class="btn btn-sm btn-icon btn-pure btn-default"' + ' id="viewimage" data-toggle="modal" title="查看图片" ><i class="fa-circle-o" aria-hidden="true"></i></button>';

                            edit += '<button type="button" class="btn btn-sm btn-icon btn-pure btn-default"' + ' id="printpicture" title="打印图片" ><i class="fa-edit" aria-hidden="true"></i></button>';

                            return edit;

                        }

                    }

                ],


<div class="panel">

            <header class="panel-heading">

                <h3 class="panel-title">影像查询</h3>

            </header>

            <div class="panel-body">

                <table class="table table-bordered table-hover text-nowrap dataTable table-striped width-full margin-vertical-10"

                       id="imageTable" data-scroll-x="true" data-responsive="false"

                       data-column-defs='[{ "orderable": false, "targets": 2}]'>

                    <thead>

                    <tr>

                        <th width="30">

                            <span class="checkbox-custom checkbox-primary purchase-select-all">

	                            <input id="checkAll" type="checkbox" class="purchase-checkbox selectable-all">

	                            <label></label>

	                        </span>

                        </th>

                        <th>ID</th>

                        <th>姓名</th>

                        <th>身份证号</th>

                        <th>旧档案号</th>

                        <th>图片地址</th>

                        <th>图片全路径</th>

                        <th>图片名称</th>

                        <th>类型</th>

                        <th>批次号</th>

                        <th>描述</th>

                        <th>操作</th>

                    </tr>

                    </thead>

                </table>

            </div>

        </div>

    </div>

</div>





<div class="modal fade" id="unitForm" aria-hidden="true" role="dialog">

    <div class="modal-dialog modal-center">

        <form class="modal-content" id="menuInfo">

            <div class="modal-header">



            </div>

            <div class="modal-body">

                <div class="center-block">

                    <img src="" class="img-responsive" alt="" name="imgView">

                </div>

            </div>

        </form>

    </div>

</div>

...全文
1007 18 打赏 收藏 举报
写回复
18 条回复
切换为时间正序
请发表友善的回复…
发表回复
454545454545454 2018-06-15
  • 打赏
  • 举报
 回复
引用 11 楼 ambit_tsai 的回复:
[quote=引用 9 楼 u011972939 的回复:] [quote=引用 7 楼 ambit_tsai 的回复:] 在<Host>元素中添加子元素<Context path="/image" docBase="D:\\image"/> 并重启服务器； <img src=“/image/20170305..../xxx.jpg” />类似这样写
下面是我后端的代码 通过后端从数据库获取到数据后就直接把绝对路径改成相对路径可以吗，这个要改的话应该怎么写？[/quote] java我也不了解，大概看了下， 你的查询写在TbbusidataServiceImpl的queryImage方法 

// TbbusidataServiceImpl
    //影像查询
    @Override
    public Map<String, Object> queryImage(Tbbusidata tbb) {
        Map<String, Object> jsonMap = new HashMap<String, Object>();
         
        try {
            List<Tbbusidata> tbbList = mapper.queryImage(tbb);
查出tbbList后，遍历一下，把路径批量改掉就好了[/quote] 
 handleEdit: function () {
            $content.on('click', '.page-unit button[id="viewimage"]', function () {
                var $unitform = $('#unitForm');
                //获取到列表的数据
                var rowdata = oTable.row($(this).closest('tr')).data();
                //给img(name=imgView)的src添加获取的到列表数据
                //rowdata.largefilename(这是图片地址)和rowdata.imgfilename(这是图片名名称)
                $unitform.find("img[name='imgView']").attr("src",rowdata.largefilename+"\\"+rowdata.imgfilename);

                //$unitform.find("img[name='imgView']").attr("src","/public/images/00001.jpg");
                //$unitform.find("img[name='imgView']").attr("src","/image/"+rowdata.imgfilename);
                $unitform.find("img[name='imgView']").attr("alt",rowdata.subtypeid);
                $unitform.modal('show');

            });
        },
因为是从表获取到的，所以能知道那个图片对应的哪一行，用<Host>的话img src=""这里要写具体的路径的 java后端哪里要写for if 进行遍历和判断，我现在不知道怎么写。。。
ambit_tsai-微信 2018-06-15
  • 打赏
  • 举报
 回复
引用 9 楼 u011972939 的回复:
[quote=引用 7 楼 ambit_tsai 的回复:] 在<Host>元素中添加子元素<Context path="/image" docBase="D:\\image"/> 并重启服务器； <img src=“/image/20170305..../xxx.jpg” />类似这样写
下面是我后端的代码 通过后端从数据库获取到数据后就直接把绝对路径改成相对路径可以吗，这个要改的话应该怎么写？[/quote] java我也不了解，大概看了下， 你的查询写在TbbusidataServiceImpl的queryImage方法 

// TbbusidataServiceImpl
    //影像查询
    @Override
    public Map<String, Object> queryImage(Tbbusidata tbb) {
        Map<String, Object> jsonMap = new HashMap<String, Object>();
         
        try {
            List<Tbbusidata> tbbList = mapper.queryImage(tbb);
查出tbbList后，遍历一下，把路径批量改掉就好了
ambit_tsai-微信 2018-06-15
  • 打赏
  • 举报
 回复
引用 8 楼 u011972939 的回复:
就是点击操作栏的按钮，点哪一行的就给哪一行附上图片链接，通过给<Host>元素添加<Context>怎么实现给多行数据附上图片链接，我后面还要实现一个打印的功能， 通过全选或者多选，再点击打印进行打印。
<Context>是实现物理路径D:\image映射到web路径http://xxx/image，此时，目录下的子目录如D:\image\20170305\可以通过http://xxx/image/20170305的形式访问，D:\image\20170305\xxx.jpg通过http://xxx/image/20170305/xxx.jpg访问。 所以，你映射了父目录，子目录都是能访问得到得
454545454545454 2018-06-15
  • 打赏
  • 举报
 回复
引用 7 楼 ambit_tsai 的回复:
在<Host>元素中添加子元素<Context path="/image" docBase="D:\\image"/> 并重启服务器； <img src=“/image/20170305..../xxx.jpg” />类似这样写
下面是我后端的代码 
 <!-- 查询总数 -->
    <select id="imageTotal" resultType="Integer" parameterType="tbbusidata">
        SELECT count(1)
        FROM tb_busi_data td
        INNER JOIN tb_xhscan_batch tb ON td.JDAH=tb.HeHao
        INNER JOIN tb_xhscan_input2_data ti ON tb.BatchId=ti.BatchId
        WHERE 1=1
        <if test="jdah != null">
            and JDAH=#{jdah}
        </if>
        <if test="sfzh != null">
            and SFZH=#{sfzh}
        </if>
    </select>

    <!-- 查询全部 -->
    <select id="queryImage" resultType="tbbusidata" parameterType="tbbusidata">
        SELECT bd.`JDAH`,bd.`XM`,bd.`SFZH`,xb.`FSMachineIp`,xb.`LargeFileName`,td.`SubType`,xb.`BatchId`,td.`SubTypeid`,td.`ImgFileName`
        FROM tb_busi_data bd
        INNER JOIN tb_xhscan_batch xb ON bd.`JDAH`=xb.`HeHao`
        INNER JOIN tb_xhscan_input2_data td ON xb.`BatchId`=td.`BatchId`
        WHERE 1=1
        <if test="jdah != null">
            and JDAH=#{jdah}
        </if>
        <if test="sfzh != null">
            and SFZH=#{sfzh}
        </if>
        <if test="start != null and limit != null">
            limit #{start},#{limit}
        </if>
    </select>
public interface TbbusidataMapper<T> {

    List<Tbbusidata>query(Tbbusidata tbb);
    
    Integer getTotal(Tbbusidata tbb);
    
    //查询全部
    List<T>queryImage(Tbbusidata tbb);
    
    //总数
    Integer imageTotal(Tbbusidata tbb);

    List<Tbgz>querygz(Tbgz tbgz);
}
public interface TbbusidataService {

    Map<String, Object> query(Tbbusidata tbb);

    //查询全部图片资料
    Map<String,Object>queryImage(Tbbusidata tbb);

}
@Service
@Transactional
public class TbbusidataServiceImpl implements TbbusidataService {
    Logger logger = Logger.getLogger(TbbusidataController.class);

    @Autowired
    private TbbusidataMapper mapper;

    @Override
    public Map<String, Object> query(Tbbusidata tbb) {
        Map<String, Object> jsonMap = new HashMap<String, Object>();

        try {
            List<Tbbusidata> tbbList = mapper.query(tbb);
            Integer total = mapper.getTotal(tbb);
            jsonMap.put("success", true);
            jsonMap.put("total", total);
            jsonMap.put("data", tbbList);
        } catch (Exception e) {
            jsonMap.put("success", false);
            logger.error("报错");
        }
        return jsonMap;
    }

    //影像查询
    @Override
    public Map<String, Object> queryImage(Tbbusidata tbb) {
        Map<String, Object> jsonMap = new HashMap<String, Object>();
        
        try {
            List<Tbbusidata> tbbList = mapper.queryImage(tbb);
            Integer total = mapper.imageTotal(tbb);
            jsonMap.put("success", true);
            jsonMap.put("total", total);
            jsonMap.put("data", tbbList);
        } catch (Exception e) {
            jsonMap.put("success", false);
            logger.error("报错");
        }
        return jsonMap;
    }
}
@Controller
@RequestMapping("/viewFiles/archives")
public class TbbusidataController extends BaseController {

    Logger logger = Logger.getLogger(TbbusidataController.class);

    @Autowired
    private TbbusidataService tbbusidataService;
    
    @RequestMapping(value = "/query", method = RequestMethod.POST)
    @ResponseBody
    public Map<String, Object> query(Tbbusidata tbb) {
        return tbbusidataService.query(tbb);
    }

    //影像查询
    @RequestMapping(value = "/queryImage",method = RequestMethod.POST)
    @ResponseBody
    public Map<String, Object> queryImage(Tbbusidata tbb) {
        return tbbusidataService.queryImage(tbb);
    }
}
/**
 * 页面的跳转
 */

@Controller
@RequestMapping("/viewFiles")
public class ViewPjaxController extends BaseController {

    Logger logger = Logger.getLogger(this.getClass());

    @RequestMapping(value = "/archives", method = RequestMethod.GET)
    public ModelAndView archives(HttpServletRequest request) {

        ModelAndView mv = new ModelAndView();
        String pjax = request.getHeader("X-PJAX");

        if (StringUtils.isNotBlank(pjax) && "true".equals(pjax)) {
            mv.setViewName("viewFiles/archives");
        } else {
            mv.addObject("include", "viewFiles/archives.jsp");
            mv.setViewName("index");
        }
        return mv;
    }

    /**
     * 影像查询
     */

    @RequestMapping(value = "/imageview", method = RequestMethod.GET)
    public ModelAndView imageview(HttpServletRequest request) {
        ModelAndView mv = new ModelAndView();
        String pjax = request.getHeader("X-PJAX");

        if (StringUtils.isNotBlank(pjax) && "true".equals(pjax)) {
            mv.setViewName("viewFiles/imageview");
        } else {
            mv.addObject("include", "viewFiles/imageview.jsp");
            mv.setViewName("index");
        }
        return mv;
    }
}
通过后端从数据库获取到数据后就直接把绝对路径改成相对路径可以吗，这个要改的话应该怎么写？
454545454545454 2018-06-15
  • 打赏
  • 举报
 回复
引用 7 楼 ambit_tsai 的回复:
在<Host>元素中添加子元素<Context path="/image" docBase="D:\\image"/> 并重启服务器；
<img src=“/image/20170305..../xxx.jpg” />类似这样写

<div class="modal fade" id="unitForm" aria-hidden="true" role="dialog">

    <div class="modal-dialog modal-center">

        <form class="modal-content" id="menuInfo">

            <div class="modal-header">

                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">

                    ×

                </button>

            </div>

            <div class="modal-body" id="qrcode">

                    <img src="" alt="" class="img-responsive center-block" name="imgView">

            </div>

            <div class="modal-footer">

                <button type="button" id="btn_print" class="btn btn-primary" data-dismiss="modal">

                    <span class="glyphicon glyphicon-floppy-disk" aria-hidden="true"></span>打印

                </button>

            </div>

        </form>

    </div>

</div>

我现在大概是这样的，通过按钮的点击，打开一个modal，然后给<img src="" alt="" class="img-responsive center-block" name="imgView">附上图片的地址链接

就是点击操作栏的按钮，点哪一行的就给哪一行附上图片链接，通过给<Host>元素添加<Context>怎么实现给多行数据附上图片链接，我后面还要实现一个打印的功能，

通过全选或者多选，再点击打印进行打印。
ambit_tsai-微信 2018-06-15
  • 打赏
  • 举报
 回复
在<Host>元素中添加子元素<Context path="/image" docBase="D:\\image"/> 并重启服务器； <img src=“/image/20170305..../xxx.jpg” />类似这样写
ambit_tsai-微信 2018-06-15
  • 打赏
  • 举报
 回复
引用 17 楼 454545454545454的回复:
[quote=引用 14 楼 ambit_tsai 的回复:] [quote=引用 13 楼 u011972939 的回复:]
把我们项目在用的配置借你参考下 <Context path="/upload" docBase="E:\upload" reloadable="true" debug="0"></Context> 我前面docBase里的D:\\image敲错了。 然后“/d:/image/”这种写法我本地测了一下会报错 话说，你就对“d:”这么执着吗，不能去掉吗？[/quote] idea不用改server.xml文件，虽然引用的是本地的tomcat,但是启动的时候好像和本地的没什么关系[/quote] 我自己是加在IDEA中的，我同事是加在server.xml中，都能用但是。
454545454545454 2018-06-15
  • 打赏
  • 举报
 回复
引用 14 楼 ambit_tsai 的回复:
[quote=引用 13 楼 u011972939 的回复:]
把我们项目在用的配置借你参考下 <Context path="/upload" docBase="E:\upload" reloadable="true" debug="0"></Context> 我前面docBase里的D:\\image敲错了。 然后“/d:/image/”这种写法我本地测了一下会报错 话说，你就对“d:”这么执着吗，不能去掉吗？[/quote] idea不用改server.xml文件，虽然引用的是本地的tomcat,但是启动的时候好像和本地的没什么关系
454545454545454 2018-06-15
  • 打赏
  • 举报
 回复
引用 14 楼 ambit_tsai 的回复:
[quote=引用 13 楼 u011972939 的回复:]

把我们项目在用的配置借你参考下
<Context path="/upload" docBase="E:\upload" reloadable="true" debug="0"></Context>
我前面docBase里的D:\\image敲错了。
然后“/d:/image/”这种写法我本地测了一下会报错

话说，你就对“d:”这么执着吗，不能去掉吗？[/quote]
搞定了，idea要配置真实文件夹的位置和虚拟路径
454545454545454 2018-06-15
  • 打赏
  • 举报
 回复
引用 14 楼 ambit_tsai 的回复:
[quote=引用 13 楼 u011972939 的回复:]

把我们项目在用的配置借你参考下
<Context path="/upload" docBase="E:\upload" reloadable="true" debug="0"></Context>
我前面docBase里的D:\\image敲错了。
然后“/d:/image/”这种写法我本地测了一下会报错

话说，你就对“d:”这么执着吗，不能去掉吗？[/quote]
我觉得这回写的没问题啊，怎么图片还是没出来？


ambit_tsai-微信 2018-06-15
  • 打赏
  • 举报
 回复
引用 13 楼 u011972939 的回复:

把我们项目在用的配置借你参考下
<Context path="/upload" docBase="E:\upload" reloadable="true" debug="0"></Context>
我前面docBase里的D:\\image敲错了。
然后“/d:/image/”这种写法我本地测了一下会报错

话说，你就对“d:”这么执着吗，不能去掉吗？
454545454545454 2018-06-15
  • 打赏
  • 举报
 回复
引用 11 楼 ambit_tsai 的回复:
[quote=引用 9 楼 u011972939 的回复:]
[quote=引用 7 楼 ambit_tsai 的回复:]
在<Host>元素中添加子元素<Context path="/image" docBase="D:\\image"/> 并重启服务器；
<img src=“/image/20170305..../xxx.jpg” />类似这样写


下面是我后端的代码

通过后端从数据库获取到数据后就直接把绝对路径改成相对路径可以吗，这个要改的话应该怎么写？[/quote]
java我也不了解，大概看了下， 你的查询写在TbbusidataServiceImpl的queryImage方法


// TbbusidataServiceImpl

    //影像查询

    @Override

    public Map<String, Object> queryImage(Tbbusidata tbb) {

        Map<String, Object> jsonMap = new HashMap<String, Object>();

         

        try {

            List<Tbbusidata> tbbList = mapper.queryImage(tbb);

查出tbbList后，遍历一下，把路径批量改掉就好了[/quote]
大佬还在吗？


我已经改成相对路径了，怎么找不到图片

454545454545454 2018-06-14
  • 打赏
  • 举报
 回复
引用 5 楼 QWERT4745 的回复:
按楼上说的，d:\image设置为虚拟路径
D:\image设置为虚拟路径，D:\image下面还有13个文件夹，会自动判断我要的文件在那个文件夹下面吗， 设置完虚拟路径后，img src=“”怎么写，因为我是直接把从数据库获取到路径给src赋值的。
QWERT4745 2018-06-14
  • 打赏
  • 举报
 回复
按楼上说的，d:\image设置为虚拟路径
454545454545454 2018-06-13
  • 打赏
  • 举报
 回复
引用 1 楼 ambit_tsai 的回复:
建议：既然数据库数据不能更改，那么数据取出来后批量处理一下，改成网页能访问到的路径。 本地路径到了web端肯定无法直接访问的，而且对外暴露内部信息，也不安全。
额，不知道该怎处理，新手不知道怎么写。
454545454545454 2018-06-13
  • 打赏
  • 举报
 回复
引用 2 楼 ambit_tsai 的回复:
Tomcat可以在Server.xml中配置web虚拟目录映射。
在<Host>元素中添加子元素<Context path=" ... " docBase=" ... "/> 并重启服务器即可；
path表示虚拟目录，docBase表示真实的web应用所在目录；
比如在C盘中存在a这个web应用目录,则 <Context path="/test" docBase="C:\a"/>
则输入 http://localhost:8888/test/1.html 就能访问到a文件夹下的 1.html
注意：这种方法需要重启服务器才能够生效，所以不适用，因为每次添加一个web应用都需要重启服务器。

这个没用，我src直接引用的列表数据，按照你的方法我还要重新写src

我本地image文件夹下有很多子文件夹，子文件夹下还有很多文件夹，2GB的图片。
ambit_tsai-微信 2018-06-13
  • 打赏
  • 举报
 回复
Tomcat可以在Server.xml中配置web虚拟目录映射。 在<Host>元素中添加子元素<Context path=" ... " docBase=" ... "/> 并重启服务器即可； path表示虚拟目录，docBase表示真实的web应用所在目录； 比如在C盘中存在a这个web应用目录,则 <Context path="/test" docBase="C:\a"/> 则输入 http://localhost:8888/test/1.html 就能访问到a文件夹下的 1.html 注意：这种方法需要重启服务器才能够生效，所以不适用，因为每次添加一个web应用都需要重启服务器。
ambit_tsai-微信 2018-06-13
  • 打赏
  • 举报
 回复
建议：既然数据库数据不能更改，那么数据取出来后批量处理一下，改成网页能访问到的路径。 本地路径到了web端肯定无法直接访问的，而且对外暴露内部信息，也不安全。
相关推荐
tomcat配置读取本地图片
在jsp页面img标签填写绝对路径却无法访问到的问题。下面讲一种可以实现在eclipse开发或者tomcat下，可以直接访问本地路径图片的方法。 假设图片保存路径为 F:\testTIFF 方法一：eclipse下配置访问本地图片： 1.双击tomcat server打开tomcat配置页面： 2.点击modules...
android保存图片的方式
Android中保存图片的两种方式 第一种是保存到数据库: 1、保存到数据库： 2、从数据库读取： 二是以图片格式保存到本地 1、 A、声明tempFile以保存到指定路径： B、保存到tempFile: 2、或者用系统方法保存到本地： 3、从相册或者相机获得的url也可以用下面的方法来得到图片 4、以上3...
android图片存取
Android中保存图片的两种方式 第一种是保存到数据库: 1、保存到数据库： 2、从数据库读取： 二是以图片格式保存到本地 1、 A、声明tempFile以保存到指定路径： B、保存到tempFile: 2、或者用系统方法保存到本地： 3、从相册或者相机获得的url也可以用下面的方法来得到图片 4、以上3种url获取图片的方法： ps:通过系统方
Android中保存图片的两种方式
Android中保存图片的两种方式第一种是保存到数据库:1、保存到数据库：2、从数据库读取：二是以图片格式保存到本地1、A、声明tempFile以保存到指定路径：B、保存到tempFile:2、或者用系统方法保存到本地：3、从相册或者相机获得的url也可以用下面的方法来得到图片4、以上3种url获取图片的方法：
关于img标签的src的绝对路径问题
最近做在做图片上传本地预览，就想着，其实直接获取到file.value，取得图片地址，不就能在本地看到图片了嘛，为什么网上还那么麻烦，搞那么多花样来读取图片什么滴。 然而仅仅用绝对路径设置了img的src, 图片是不会显示，浏览器还会报错：Not allowed to load local resource: 所以，做了做测试，查了查资料，分析分析： 在本地查看页面，如下，这种访问路径：fi
发帖
JavaScript

8.7w+

社区成员

22.4w+

社区内容

Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
帖子事件
创建了帖子
2018-06-13 03:36
社区公告
暂无公告