Блог

Я изучаю Reactjs и пытаюсь получить высоту и ширину изображений в этом файле, чтобы вычислить соотношение.

У меня есть этот файл albumData.js это выглядит следующим образом:

 // WEEK 1
import photo11 from '../images/weeks/1/DlGoaxEX0AAjY-7.jpg'
import photo12 from '../images/weeks/1/4olpqsvfte5rubn47j936z7c5vn9lff.jpeg'
import photo13 from '../images/weeks/1/9tlnx2sudu05jqxwij2evyvaifkrvbc.jpeg'

// WEEK 2
import photo21 from '../images/weeks/2/2.jpg'
import photo23 from '../images/weeks/2/original.jpg'
import photo22 from '../images/weeks/2/1_vtY9uCjeKSa1jIXm504jlg.jpeg.jpg'

export const albums = [
    {
        route: "1",
        id: "album1",
        data: [
            { id: "week 1-1", key: "1", backgroundImage: photo11, ratio: 768/1024, background: "rgb(56, 230, 236)", title: "week 1", description: "some desc" },
            { id: "week 1-2", key: "2", backgroundImage: photo12, ratio: 0.66771819137, background: "rgb(56, 230, 236)", title: "week 1", description: "some desc" },
            { id: "week 1-3", key: "3", backgroundImage: photo13, ratio: 0.74973711882, background: "rgb(56, 230, 236)", title: "week 1", description: "some desc" },
        ]
    },
    {
        route: "2",
        id: "album2",
        data: [
            { id: "week 2-1", key: "1", backgroundImage: photo21, ratio: 0.75, background: "rgb(56, 230, 236)", title: "week 2", description: "some desc" },
            { id: "week 2-2", key: "2", backgroundImage: photo22, ratio: 0.75, background: "rgb(56, 230, 236)", title: "week 2", description: "some desc" },
            { id: "week 2-3", key: "3", backgroundImage: photo23, ratio: 0.56145833333, background: "rgb(56, 230, 236)", title: "week 2", description: "some desc" },
        ]
    }
    ]
  

Я вызываю его из разных мест следующим образом

 import { albums } from '../albumData'
  

Моя проблема, которую я не могу решить, заключается в том, что мне нужно вводить изображения ratio внутри export const albums

Прежде чем я вызову и использую import { albums } from '../albumData' массив data в albums должен быть ratio заполнен из реальных изображений imports . Сейчас я делаю это вручную, но там будет 10.000 изображений.

Соотношение изображений — это ширина, деленная на высоту!

Я пытался использовать перехватчики React, но думаю, что для этого требуется функция something. Есть ли какой-нибудь статический способ в React запустить это перед использованием albums ?

Пожалуйста, посоветуйте