Блог

Главная - Вопросы по программированию - Ionic5 vue3 не может добавить фоновое изображение в

Ionic5 vue3 не может добавить фоновое изображение в

#css #image #vue.js #ionic-framework

#css #изображение #vue.js #ionic-framework

Вопрос:

Привет, хакеры и помощники:
следуйте этой статье Ionic full screen background image .Я предполагаю, что это ошибка, связанная с vue.

Код:

background_image_sample.vue

 <template>
  <ion-page>
    <ion-content>
      <h1>background_image_sample Page2</h1>
    </ion-content>
  </ion-page>
</template>

<script>
import { IonPage, IonContent } from "@ionic/vue";
import './background_image_sample.css';

export default {
  components: {
    IonPage,
    IonContent,
  },
};
</script>

background_image_sample.css

 ion-content {
  --background: url('./assets/background.png') 0 0/100% 100% no-repeat
}

облачная среда: codesandbox

Ответ №1:

Вместо того, чтобы импортировать его в script тег, вы должны поместить его в тег стиля

<style src="./background_image_sample.css"></style> или

 <style lang="scss" scoped>
 @import "./background_image_sample.css";
</style>

Я не уверен, что @import это может быть только для sass/scss языка

Комментарии:

1. сначала поблагодарите мистера 403 Веллинга за помощь. К сожалению, я дважды проверяю, чтобы импорт css был успешным. если у вас есть время. приглашаем вас посетить code sandbox. вы видите текущую среду. я сообщил, что там возникла проблема. спасибо!

Метки: