javascript如何获取图片的路径
发布时间：2021-10-15 10:50:04
来源：亿速云
阅读：295
作者：小新
栏目：web开发
# JavaScript如何获取图片的路径
在Web开发中，获取图片路径是常见的需求，无论是用于动态加载、图片预览还是路径分析。本文将详细介绍通过JavaScript获取图片路径的多种方法，包括DOM操作、事件处理和特殊场景下的技巧。
---
## 一、通过DOM元素获取图片路径
### 1. 获取``标签的`src`属性
最直接的方式是通过DOM选择器获取``元素的`src`属性：
```javascript
const img = document.querySelector('img');
const imgPath = img.src;
console.log(imgPath); // 输出完整URL（如：http://example.com/image.jpg）
注意事项：
- 如果图片是相对路径，返回的src会被浏览器补全为绝对URL。
- 动态修改src后需等待图片加载完成才能获取新路径。
2. 获取动态生成的图片路径
若图片通过JavaScript动态创建，需确保元素已插入DOM：
const dynamicImg = new Image();
dynamicImg.src = 'assets/new-image.png';
document.body.appendChild(dynamicImg);
// 后续可通过dynamicImg.src获取路径
二、通过用户上传获取本地图片路径
1. 使用
用户上传文件时，可通过FileReader获取临时路径（非真实本地路径）：
const fileInput = document.getElementById('file-input');
fileInput.addEventListener('change', (e) => {
const file = e.target.files[0];
const reader = new FileReader();
reader.onload = (event) => {
console.log(event.target.result); // 输出DataURL（如：data:image/png;base64,...）
};
reader.readAsDataURL(file);
});
限制：
- 浏览器出于安全考虑，无法直接获取用户本地文件的真实路径（如C:\Users\...）。
- DataURL适合预览，但可能因数据量大影响性能。
2. 使用URL.createObjectURL()
生成一个指向内存中文件的Blob URL：
const blobUrl = URL.createObjectURL(file);
console.log(blobUrl); // 输出类似：blob:http://localhost/550e8400...
img.src = blobUrl;
// 使用后需手动释放内存
URL.revokeObjectURL(blobUrl);
三、特殊场景下的路径获取
1. 获取CSS背景图路径
通过getComputedStyle解析样式中的背景图：
const div = document.querySelector('.bg-image');
const bgUrl = window.getComputedStyle(div)
.backgroundImage
.replace(/url\(['"]?(.*?)['"]?\)/i, '$1');
console.log(bgUrl); // 输出背景图URL
2. 处理SVG内嵌图片
若图片嵌套在SVG中，需遍历SVG节点：
const svgImage = document.querySelector('svg image');
const xlinkHref = svgImage.getAttribute('xlink:href') || svgImage.getAttribute('href');
四、路径处理技巧
1. 解析路径组成部分
使用URL对象拆解路径：
const url = new URL(img.src);
console.log({
origin: url.origin, // 协议+域名
pathname: url.pathname, // 路径部分
filename: url.pathname.split('/').pop() // 提取文件名
});
2. 相对路径转绝对路径
function toAbsoluteUrl(relativePath) {
return new URL(relativePath, window.location.href).href;
}
五、安全与兼容性注意事项
跨域限制：
若图片来自不同域且未设置CORS，部分操作（如Canvas分析）会报错。
路径编码：
遇到特殊字符（如空格、中文）时，可用encodeURI()处理：
const safePath = encodeURI(img.src);
浏览器差异：
旧版IE可能需用getAttribute('src', 2)获取完整路径。
移动端部分浏览器对Blob URL支持有限。
六、总结
场景
推荐方法
输出形式
获取DOM图片
imgElement.src
完整URL
用户上传图片
FileReader.readAsDataURL()
DataURL
CSS背景图
getComputedStyle()
原始URL字符串
路径分析
URL对象
结构化路径信息
根据实际需求选择合适方法，并注意处理异步加载和内存管理问题。掌握这些技巧能高效解决大多数图片路径获取场景。
“`
（注：实际字数约950字，此处为简洁展示部分核心内容，完整版本可扩展示例和详细说明。）