本地图片显示在网页

本文介绍了一种实现图片预览与上传的方法,通过检测用户浏览器类型来适配不同技术方案,确保跨浏览器兼容性。该方法支持IE、Firefox、Chrome等主流浏览器,并能够根据用户上传的文件类型进行限制。
<if condition="$member_info['member_avatar']">
                        <img style="display: inline-block;border-radius: 100%" id="page-pic" width="80px"  height="80px"  src="__PUBLIC__/member/avatar/<!--{$member_info.member_avatar}-->"/>
                    <else />

                        <img style="display: inline-block;border-radius: 100%"id="page-pic" width="80px"  height="80px"  src="__PUBLIC__/member/avatar/grzx.png"/>
                </if>
                    <input type="file" onchange="filePic(this)" value="" placeholder="" id="member_avatar" name="member_avatar">



/**
* 从 file 域获取 本地图片 url
*/
function getFileUrl(sourceId) {
var url;
if (navigator.userAgent.indexOf("MSIE") >= 1 && !(navigator.userAgent.indexOf("MSIE 10.0") > 0) ) { // IE10取消了滤镜
//url = document.getElementById(sourceId).value;
document.all.imgOne.select();
$("#preview").focus();
url = document.selection.createRange().text;
} else if (navigator.userAgent.indexOf("Firefox") > 0) { // Firefox
url = window.URL.createObjectURL(document.getElementById(sourceId).files.item(0));
} else if (navigator.userAgent.indexOf("Chrome") > 0) { // Chrome
url = window.URL.createObjectURL(document.getElementById(sourceId).files.item(0));
}else if(navigator.userAgent.indexOf("MSIE 10.0") > 0){
url = window.URL.createObjectURL(document.getElementById(sourceId).files.item(0));
}else{
url = window.URL.createObjectURL(document.getElementById(sourceId).files.item(0));
}
return url;
}

/**
* 将本地图片 显示到浏览器上
*/
function preImg(sourceId, target) {
var url = getFileUrl(sourceId);
if(window.navigator.userAgent.indexOf("MSIE") >= 1 && !(navigator.userAgent.indexOf("MSIE 10.0") > 0) ) {
var picpreview=document.getElementById("preview");
picpreview.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = url;
}else{
$("#page-pic").attr("src",url);
}

}

function filePic(h) {
if (!h.files.length) {
alert("未选择文件");
return;
}
var type, h_type;
h_type = h.value.split(".");
type = h_type[h_type.length - 1].toLocaleLowerCase();
var file = h.files[0];
if ((type != "jpg" && type != "png" && type != "jpeg")) {
h.value = "";
h.files = null;
alert("抱歉,仅支持的jpg或png或者jpeg图片");
return;
}
var hID = h.id;
preImg(hID);
}
### 如何在HTML中正确引用和显示本地图片路径 为了确保HTML网页能够正确显示本地图片,需注意不同框架下的配置差异以及静态资源管理方法。 #### 配置Jekyll博客系统的资产文件夹功能 对于基于Jekyll构建的网站,在`_config.yml`文件内设置`post_asset_folder: true`可使每篇文章拥有独立的资产文件夹[^1]。这有助于更好地管理和引用文章内的媒体资源,包括图片。 #### 处理Spring Boot项目中的前端资源路径问题 当遇到CSS或JS文件加载失败的情况时,通常是因为相对路径解析不当所致。采用Thymeleaf模板引擎的情况下,可以通过指定基础URL或者利用内置表达式语法(如`@{/}`)来修正这些外部样式表和脚本链接的位置[^2]: ```html <link rel="stylesheet" type="text/css" href="/css/style.css"> <script th:src="@{/js/app.js}"></script> ``` #### Vue应用中处理静态资源引用 针对Vue CLI创建的应用程序,默认情况下建议将公共资源放置于`public`目录下,并通过根级斜杠开头的方式访问;而对于源码内部使用的素材,则应放入`src/assets`里并借助Webpack打包工具进行优化处理[^3]。如果要动态渲染一系列图像列表,务必确认所给定的数据项已经过适当转换以便浏览器识别其真实位置[^4]: ```javascript data() { return { images: [ require('@/assets/images/example1.jpg'), require('@/assets/images/example2.jpg') ] } } ``` ```html <div v-for="(image, idx) in images" :key="idx"> <img :src="image"/> </div> ``` 以上措施能帮助开发者有效地解决各类Web开发场景中存在的本地图片无法正常展示的问题。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值