Блог

У меня есть веб-приложение, разработанное в Vue.js , который имеет компонент бокового навигационного меню. Этот компонент имеет условный рендеринг для отображения только при необходимости. Внутри компонента есть изображение для отображения кнопки закрытия для бокового меню.

 <transition name="fade">
  <div
    v-if="side_menu_is_open"
    ...
  >
    <div
      ...
    >
        <div class="mt-3 p-2" @click="toggleSideMenu">
          <img :src="require('../assets/icons/cancel.svg')" class="w-8">
        </div>

      <ul class="mt-4">
        ...
      </ul>
    </div>
  </div>
</transition>
 

Все это работает нормально. Однако при первом отображении / отображении компонента бокового меню изображению требуется некоторое время для загрузки файла. Есть ли способ загрузить изображение для условного рендеринга, даже если компонент не загружен?

Вы можете предварительно загрузить это изображение в свой created() метод. Это гарантирует, что браузер загрузил изображение, когда это необходимо.

 var img = new Image();
img.src = '../assets/icons/cancel.svg';
 

Или вместо использования <img /> тега вы можете использовать встроенный svg непосредственно в вашем html.

Кнопка закрытия не должна быть частью рендеринга условия.

Нравится

 <div flex direction: row, flex:1>
  <div flex-direction:column flex:0.90>
  {
  //contion rendering
  }
  </div>
  <img src={closeIcon} flex:0.10/>

</div>