从后台获取文件。img的src内容(通用方法)

本文详细解析了从后端数据库查询图片,并将其传递到前端显示的全过程。使用Java Hibernate Spring进行后端处理,前端采用Dojo框架。涵盖图片查询、流处理、错误处理及响应类型设置。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

返回文件流,给img的src 赋值 为请求地址

– 前端为dojo,后端为java -hibernate - spring

  1. dao
@Override
	public byte[] queryPhotoImg(String Id) {
        StringBuffer sql = new StringBuffer();
        sql.append(" SELECT  PHOTO");
        sql.append(" FROM TAB_TEST  ");
        sql.append(" WHERE ID= ?   ");
        Session session = (Session) getCurrentSession();
        SQLQuery query = session.createSQLQuery(sql.toString());
        query.addScalar("PHOTO",Hibernate.BLOB);
        query.setParameter(0,sAreaId);
        Blob blob  = (Blob) query.uniqueResult();
        if(blob == null){
        	return null;
		}
        InputStream is = null;
        byte[] b = null;
        try {
              is = blob.getBinaryStream();
              b = new byte [( int ) blob.length ()];
              is.read ( b );

        } catch (IOException e) {
            e.printStackTrace();
        } catch (SQLException e) {
            e.printStackTrace();
        } finally {
            try
            {
                is.close ();
                is = null;
            }
            catch ( IOException e )
            {
                e.printStackTrace ();
            }
        }
        return b;
	}
  1. Service
public byte[] queryPhotoImg(String  Id) {
   	if(StringUtils.isNotEmpty(Id)) {
   		return  Dao.queryPhotoImg(sAreaId);
   	}
   	return null;
   }
  1. Rset
@RequestMapping(value ="/queryImg")
   public void queryPhotoImg(HttpServletRequest req, HttpServletResponse res,String id) throws IOException {
       byte[] bytes = Service.queryPhotoImg(id);
       if(bytes == null){
       	 res.getWriter().print("null");
   	}else {
           res.setContentType("image/jpg");
           res.setContentLength(bytes.length);
           res.getOutputStream().write(bytes);
       }
   }
前端
initImg:function(){
        this. Photo.onerror = dojo.hitch(this,function(dom){
            dom.src = "../images/none.png";
        }, this.showDoorPhoto);  //返回错误时,默认图片
        this.showDoorPhoto.src = "[src]?id=?"+ Id+"&t=" + Math.random();  //每次都重新请求url
    },
<think>好的,用户的问题是如何在HTML中根据后端返回的数据动态加载和显示本地图片。我需要结合他们提到的引用内容来解答。 首先,用户之前提到过使用Ajax动态获取JSON数据并加载到表格中,这可能意味着他们对前端与后端的交互有一定了解。现在他们想应用类似的方法来加载图片。 根据引用1,用户已经知道通过Ajax获取数据,需要注意变量声明提升的问题。这可能意味着他们在动态生成HTML内容时需要注意作用域。例如,在循环外声明变量,避免undefined的问题。 引用2提到在Vue组件中使用data方法和mounted钩子来请求数据。如果用户使用的是Vue,可能需要指导他们如何将图片路径绑定到img标签的src属性。不过用户的问题没有明确提到框架,所以可能需要通用的JavaScript方法。 用户想显示本地图片,这里的“本地”可能指存储在服务器上的图片,而非用户本地的文件。需要确认图片路径是否正确,是否由后端返回正确的URL或相对路径。 步骤可能是这样的: 1. 后端返回的数据中包含图片的文件名或路径。 2. 前端通过Ajax获取这些数据。 3. 动态生成img元素,设置src属性为图片的路径。 4. 将img添加到DOM中。 需要注意图片的存储位置,假设图片放在服务器的某个目录下,比如`/images`,那么后端返回的路径应该是相对于该目录的文件名。前端构建src时需要拼接路径,例如`src="/images/"+文件名`。 另外,要处理可能的错误,比如图片加载失败的情况,可以添加onerror事件处理。 如果用户使用的是纯JavaScript,可以用createElement和appendChild来动态创建图片。如果用jQuery或Vue,方法会有所不同,但用户没有提到,所以保持通用。 还要考虑跨域问题,但如果是同源请求,应该没问题。如果图片路径正确,浏览器会自动加载。 总结回答结构: 1. 后端数据结构:确保包含图片路径。 2. 前端Ajax请求获取数据。 3. 动态生成img标签,设置src。 4. 添加到页面容器。 5. 错误处理。 6. 示例代码。 可能的问题:用户可能混淆了本地文件路径和服务器路径,需要明确说明图片应存储在服务器,并通过正确的URL访问。</think>### 动态加载本地图片的实现步骤 #### 1. 后端数据格式要求 确保后端返回的JSON数据包含图片路径信息。例如: ```json { "images": [ {"filename": "chart1.png", "title": "销售趋势"}, {"filename": "chart2.png", "description": "用户分布"} ] } ``` #### 2. 前端实现逻辑 ```html <!-- 图片展示容器 --> <div id="image-container" class="grid-layout"></div> <script> // 使用AJAX获取数据(示例使用原生JavaScript) function loadImages() { fetch('/api/get-images') // 替换为真实接口地址 .then(response => response.json()) .then(data => { const container = document.getElementById('image-container'); let htmlStr = ''; data.images.forEach(item => { htmlStr += ` <div class="image-card"> <img src="/static/images/${item.filename}" alt="${item.title || ''}" onerror="this.src='/static/images/placeholder.png'"> ${item.title ? `<p>${item.title}</p>` : ''} </div> `; }); container.innerHTML = htmlStr; }); } // 页面加载时执行 window.addEventListener('DOMContentLoaded', loadImages); </script> ``` #### 3. 关键实现细节 1. **路径拼接**: - 假设服务器图片存储在`/static/images/`目录 - 使用模板字符串拼接完整路径:`src="/static/images/${item.filename}"` 2. **错误处理**: - 通过`onerror`事件加载占位图 - 建议添加加载状态指示器(如旋转图标) 3. **样式优化**: ```css .grid-layout { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; } .image-card img { width: 100%; height: 200px; object-fit: contain; background: #f5f5f5; } ``` #### 4. 后端配合要求 1. 确保接口返回正确的MIME类型:`Content-Type: application/json` 2. 图片文件需要部署到服务器指定目录(如Nginx配置静态资源路径) 3. 建议提供图片缩略图机制(大图压缩传输) #### 5. 安全增强建议 1. 文件名校验:过滤`../`等路径穿越字符 2. 设置响应头限制图片域: ```http Content-Security-Policy: default-src 'self' ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值