Блог

Мне нужно получить высоту и ширину изображения, которое находится в локальной папке ресурсов моего проекта.

Я пытаюсь сделать, как в mounted () :

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

Но у меня всегда есть 0 вместо 3030 пикселей

Редактировать:

Я нашел половинное решение, потому что оно не завершено.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)
    };
  

Вам нужно будет дождаться полной загрузки изображения заранее, чтобы получить ширину и высоту созданного изображения.

 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');
}
  

Насколько я понимаю, вы не можете запрашивать высоту и ширину изображения, не помещая его в DOM, если вы уже не назначили ему height и width программно. Скорее, вы хотите запросить естественную высоту и ширину ( naturalHeight и naturalWidth ), которые являются исходными размерами изображения перед размещением в DOM. Я также рекомендую добавлять все, что вы планируете программно вызывать, к своему data объекту.

 import MyImage from '../../assets/sprites/grid.png';

export default {
  [...],
  data() {
    return {
      myImage
    }
  },
  mounted() {
    let img = new Image();
    img.src = this.myImage;
    console.log(img.naturalWidth, img.naturalHeight);
  },
  [...]
}