vue获取<img>原始大小

你可以使用 `naturalWidth` 和 `naturalHeight` 属性来获取 `<img>` 标签的原始大小。例如：

const img = document.querySelector('img');
const width = img.naturalWidth;
const height = img.naturalHeight;
console.log(`原始大小为 ${width} x ${height}`);

在 Vue 中，你可以在 `mounted` 钩子函数中获取 `<img>` 元素并访问其属性。例如：

mounted() {
  const img = this.$refs.myImg;
  const width = img.naturalWidth;
  const height = img.naturalHeight;
  console.log(`原始大小为 ${width} x ${height}`);
}

在模板中，你需要为 `<img>` 标签指定一个唯一的 `ref` 属性，以便在 Vue 实例中引用该元素。例如：

<template>
  <div>
    <img ref="myImg" src="example.jpg">
  </div>
</template>

相关问题

vue.runtime.esm.js:619 [Vue warn]: Error in v-on handler: "TypeError: this.$modalAttr is not a function" found in ---> <ElButton> at packages/button/src/button.vue <ElFormItem> at packages/form/src/form-item.vue <ElCol> <ElRow> <ElForm> at packages/form/src/form.vue <ElCard> at packages/card/src/main.vue <ProductProductAdd> at src/views/goods/create.vue <AppMain> at src/views/layout/components/AppMain.vue <Layout> at src/views/layout/Layout.vue <App> at src/App.vue <Root>

这个错误提示显示在 Vue.js 的运行时中，意味着在某个 v-on 事件处理程序中调用了一个名为 this.$modalAttr 的函数，但是 this 上没有这个方法。可能是因为该方法没有在组件实例中定义或者在组件实例中定义时没有正确绑定 this。需要检查代码中的事件处理程序并确保正确定义了该函数。

Vue warn]: Error in v-on handler: "TypeError: handler.apply is not a function" found in ---> <ElSelect> at packages/select/src/select.vue <ElFormItem> at packages/form/src/form-item.vue <ElRow> <ElForm> at packages/form/src/form.vue <ElCard> at packages/card/src/main.vue <Information> at src/views/basicdata/organization/components/information.vue <ElCol> <ElRow> <Index> at src/views/basicdata/organization/index.vue <AppMain> at src/layout/components/AppMain.vue <Layout> at src/layout/index.vue <App> at src/App.vue <Root>

这个错误提示显示，在某个地方使用了一个函数，但是这个函数并不是一个可执行的函数。一种可能是在使用一个非函数类型的变量来作为函数来调用，或者是变量没有被正确初始化，导致其值不是一个函数类型。需要检查代码中是否有这样的情况。另外，也有可能是函数的作用域、参数或返回值等方面出现了问题，需要仔细检查函数的实现。