javascript - vueJs中获取图片大小mounted

Question

我需要获取项目本地 Assets 文件夹中图像的高度和宽度。

我尝试在 mounted() 中这样做:

let grid = new Image()
grid.src = require('../../assets/sprites/grid.png');
console.log(grid.naturalWidth, grid.naturalHeight)

但我总是用 0 而不是 3030px

编辑:

我找到了一半的解决方案，因为它不完整this.gridPattern 定义在上面的数据中，我需要重新分配它的值但是，值是 0

let grid = new Image()

grid.src = require('../../assets/sprites/grid_pathern.png');

grid.onload = () => {
    console.log(`the image dimensions are ${grid.width}x${grid.height}`);
    this.gridPattern = {width:grid.width,height:grid.height}
    console.log(this.gridPattern)
    };

Answer 1

您需要提前等待图像完全加载，以便获得实例化图像的宽度和高度。

async mounted() {
    let image = new Image();
    
    image.onload = function () {
        console.log(`the image dimensions are ${img.width}x${img.height}`);
    };
   
    image.src = require('../../assets/sprites/grid_pathern.png');
}