img的src地址是一个请求的方式来显示图片

Java Web图片加载示例
本文展示了一个简单的Java Web应用程序示例,该程序通过Controller处理请求并从本地文件系统加载图片资源到网页中。示例代码包括了使用FileInputStream读取图片文件以及通过HttpServletResponse将图片输出到客户端的过程。

1.jsp

 <img alt="test" src="getImg2.do">


2.controller

	@RequestMapping("getImg2")
	public void getImg2(HttpServletRequest request, HttpServletResponse response)
			throws IOException {
		FileInputStream fis = null;
		OutputStream os = null;
		try {
			fis = new FileInputStream("d:/log.png");
			os = response.getOutputStream();
			int count = 0;
			byte[] buffer = new byte[1024 * 8];
			while ((count = fis.read(buffer)) != -1) {
				os.write(buffer, 0, count);
				os.flush();
			}
		} catch (Exception e) {
			e.printStackTrace();
		} finally {
			try {
				fis.close();
				os.close();
			} catch (IOException e) {
				e.printStackTrace();
			}
		}
	}



### Vue 中 `img` 标签加载 SVG 图片显示的解决方案 在 Vue 项目中遇到 `img` 标签加载 SVG 文件失败的情况,通常是因为 Webpack 的默认配置不会处理 `.svg` 文件作为 URL 加载。以下是几种有效的解决办法: #### 方法一:使用 ES6 导入语句并绑定到组件的数据属性 可以在脚本部分通过 `import` 关键字提前加载SVG图像,并将其赋给一个变量,在模板里利用 v-bind 动态设置 src 值。 ```html <template> <img :src="imagesUrl" alt=""/> </template> <script> // 提前导入SVG文件路径 import svgImg from '@/assets/images/qiye.svg'; export default { name: 'ImageComponent', data(){ return { imagesUrl: svgImg // 将导入的结果存放在data函数返回的对象里面 } } } </script> ``` 这种方法能够确保打包工具正确解析相对路径下的资源位置[^1]。 #### 方法二:采用 require 函数动态请求图片地址 当不确定图片的具体名称或者是在运行时才决定要使用的图标时,可以尝试下面的方式: ```javascript computed:{ dynamicImageUrl() { try{ let url = require(`@/assets/${this.imageName}.svg`); return url; }catch(error){ console.log('Failed to load image:', error); return ''; } } }, ``` 注意这里的 `try...catch` 结构是为了防止因找不到指定文件而抛出异常中断程序执行流[^4]。 #### 方法三:创建自定义公共 SVG 组件来增强灵活性 为了更灵活地控制样式以及实现诸如改变颜色等功能,建议封装一个通用的 SVG 显示组件。这不仅限于静态展示,还可以接受 props 来调整内部结构或外观特性[^3]。 以上三种方式均经过实践验证可行,具体选用哪一种取决于实际需求场景和个人偏好。对于偶尔用到几个固定不变的小图标来说,前两者已经足够;而对于频繁更新且需要高度定制化的图形,则更适合后者。
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值