### 如何在
Vue.js 中动态
获取图片的
宽高
#### 使用 `ref` 和 DOM 方法
获取图片原始
尺寸
在
Vue 3 的组合式 API 中，可以通过模板引用 (`ref`) 来访问 DOM 节点。对于
图片元素，可以利用其属性 `naturalWidth` 和 `naturalHeight`
获取图像的原始分辨率。以下是具体实现方式：
```javascript
<template>
<img ref="
imageRef" src="/path/to/
image.jpg" alt="example">
</template>
<script setup>
import { ref, onMounted } from &#
39;
vue&#
39;;
const
imageRef = ref(null);
const originalWidth = ref(0);
const originalHeight = ref(0);
onMounted(() => {
if (
imageRef.value) {
originalWidth.value =
imageRef.value.naturalWidth; // 原始
宽度 [^1]
originalHeight.value =
imageRef.value.naturalHeight; // 原始
高度 [^1]
}
});
</script>
```
上述代码展示了如何通过 `ref` 访问
图片节点，并读取它的自然
尺寸。
---
#### 动态计算
图片显示
尺寸
当
图片被缩放到容器内时，实际展示的
宽高可能不同于原始
尺寸。此时可通过 `offsetWidth` 和 `offsetHeight` 属性来
获取当前
渲染后的
尺寸。
```javascript
const displayWidth = ref(0);
const displayHeight = ref(0);
onMounted(() => {
if (
imageRef.value) {
displayWidth.value =
imageRef.value.offsetWidth; // 显示
宽度
displayHeight.value =
imageRef.value.offsetHeight; // 显示
高度
}
});
```
此方法适用于需要了解
图片在
页面上的最终呈现效果的情况。
---
#### 移动端适配下的 px 到 rem 转换
如果目标是在移动端开发中支持响应式设计，则需考虑将像素单位转换为相对单位（如 `rem`）。这通常涉及根字体大小的设置以及动态计算逻辑。
假设已知屏幕
宽度和期望的比例关系，可按如下公式
完成转换：
\[ \text{根字体大小}(\text{px}) = \frac{\text{
元素宽度}(\text{rem})}{\text{屏幕
宽度}(\text{px})} [\]^2]
例如，在 CSS 文件中定义基础比例：
```css
html {
font-size: calc(100vw / 7.5); /* 设定每份 rem 对应的实际物理
宽度 */
}
```
随后可以在 JavaScript 中进一步操作这些值以适应不同设备的需求。
---
#### 插件扩展：动态调整与增强功能
某些场景下仅
获取宽高不足以满足需求，比如希望加入旋转或其他交互行为。基于现有组件库（如
vue-preview），能够自定义修改源码或者封装新工具函数达成目的[^4]。
下面是一个简单的例子用于演示如何加载外部资源并解析其维度信息：
```javascript
function getImgNaturalDimensions(imgSrc, callback) {
const img = new
Image();
img.src = imgSrc;
img.onload = () => {
callback({ width: img.width, height: img.height }); // 自然
尺寸回调 [^
3]
};
}
// Usage Example
getImgNaturalDimensions(&#
39;/path/to/
image.jpg&#
39;, dimensions => console.log(dimensions));
```
这种方法特别适合异步加载远程文件的情形。
---
### 总结
综上所述，无论是直接操纵 DOM
元素还是借助第三方解决方案，都可以灵活应对各种复杂的业务挑战。关键是理解底层原理并与框架特性紧密结合起来加以运用。
扫一扫
2350
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
