lillianfisher

Визуальное руководство по свойствам flexbox
Flexbox Froggy

А в файле что? Пустой файл это невалидный json.

Потому что по умолчанию для свойства align-items выставлено значение stretch
, которое означает что дочерние элементы flex-контейнера заполняют всю его высоту.

Укажите для flex-контейнера свойство align-items с любым другим значением (flex-start, center, flex-end) и будет вам нулевая высота

В bootstrap-vue есть компонент `b-aspect`, реализующий похожее поведение — можете подсмотреть у них )
https://bootstrap-vue.org/docs/components/aspect

Попробуй ссылки задать свойство display: block.

Начнём с того, что вы не должны лезть внутрь компонента-ребёнка из компонента-родителя. Никогда. Компонент-ребёнок - это чёрный ящик. Вы не знаете есть ли в нём вообще firstChild и что там у него со scrollHeight. Не знаете, говорю, даже если сами тот компонент написали. Это основа компонентного подхода: содержимое любого компонента может быть полностью переписано без влияния на зависимые от него родительские компоненты. Любое управление осуществляется через props, события (и, в особых случаях, докуметированные публичные методы и свойства, получаемые через ref).

В данном случае вам нужно для ребёнка сделать компонент-обёртку(или поправить его самого), либо добавив свойство вроде set-height-by-child, которое и будет управлять данным поведением, либо, если нужна работа с этой высотой снаружи, посылать из него событие вроде @emit('scroll-height-changed', scrollHeight) при mounted, при изменении размера экрана и прочих возможных случаях.

Открыть html файл и руками подключить

Потому что then исполняется когда promise resolved (обещание выполнено)

const fn1 = () => new Promise((resolve) => {
  resolve(); // сообщаем что обещание успешно выполнено
});

fn1().then(() => {
  // обрабатываем результат
})

const fn2 = () => new Promise((resolve, reject) => {
  reject(); // сообщаем что обещание выполнено не успешно, произошла ошибка и т.д.
});

fn2().catch(() => {
  // обрабатываем ошибку
})


const fn3 = () => new Promise((resolve, reject) => {
  resolve();
});

fn3().finally(() => {
  // выполняется в любом случае, и при успехе и при ошибке
})

src не должен быть пустым

<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" />

// vue.config.js
module.exports = {
  publicPath: './'
}

Читайте