nuxt.diamic - css 배경 이미지를 동적으로 설정하는 방법
Nuxt.js를 사용하고 있으며 커스텀 컴포넌트가 있습니다.
이 컴포넌트는 css를 사용하여 배경 이미지를 설정하는 컴포넌트에 css가 있습니다.
다음을 시도했지만 실행할 때 오류가 발생합니다.에러는 다음과 같습니다.
invalid expression: Invalid regular expression flags in
요소
<template>
<section class="bg-img hero is-mobile header-image" v-bind:style="{ backgroundImage: 'url(' + image + ')' }">
<div class="">
<div class="hero-body">
<div class="container">
<h1 class="title">
{{ result }}
</h1>
<h2 class="subtitle ">
Hero subtitle
</h2>
</div>
</div>
</div>
</section>
</template>
<script>
export default {
props: ['result', 'image']
}
</script>
<style>
.bg-img {
background-image: url(~/assets/autumn-tree.jpg);
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
background-color: #999;
}
</style>
저는 https://github.com/nuxt/nuxt.js/issues/2123에서 답을 찾았습니다.
기본적으로 컴포넌트에서 다음 작업을 수행합니다.
<div :style="{ backgroundImage: `url(${backgroundUrl})` }">Content with background here</div>
url('~@/assets/autumn-tree.jpg')
나는 이것이 핵시즈 문제인 줄 알고 같은 실수를 저질렀다.웹 팩은 구문을 사용하여 자산을 해결합니다.
~는 요청을 모듈 요청으로 처리하도록 웹 팩을 적용합니다.그리고 @는 루트부터 시작합니다.
<template>
<div>
<div class="backgroundImage" :style="{ backgroundImage: `url(${backgroundImagePath})` }">
</div>
</template>
<script>
import backgroundImagePath from '~/assets/image.jpeg'
export default {
data() {
return { backgroundImagePath }
}
}
</script>
이 예에서는 require와 url을 조합하여 자산을 해결하는 방법도 있습니다.
<b-col cols="8" class="hj_projectImage justify-content-center text-center" :style="{backgroundImage: `url(` + require(`~/assets/ProjectPictures/${this.ProjectPicture}`) + `)`}">
</b-col>
보통으로 쓸 수 있지만 ': 'background-image'에 쓸 수 있습니다.
v-bind:style="{ 'background-image': 'url(' + api.url + ')' }"
전체적으로 nuxt-image 사용을 권장합니다.
여기서 해상도(미디어 쿼리)별로 이미지를 정의할 수 있습니다.$img-feature를 사용하면 background-image로 정의할 수도 있습니다.
export default {
computed: {
backgroundStyles() {
const imgUrl = this.$img('https://github.com/nuxt.png', { width: 100 })
return {
backgroundImage: `url('${imgUrl}')`
}
}
}
}
공식 매뉴얼에서는 이미 솔루션을 제공하고 있습니다.https://nuxtjs.org/docs/2.x/directory-structure/assets#images 를 참조해 주세요.
슬래시를 삭제하기만 하면 됩니다.
background-image: url("~assets/autumn-tree.jpg");
매우 역동적인 이미지(예: ${image}.jpg
:
<img :src="require(`~/assets/img/${image}.jpg`)" />
언급URL : https://stackoverflow.com/questions/48436017/nuxt-js-how-to-set-css-background-image-dynamicaly
'programing' 카테고리의 다른 글
Java 클래스 경로 내의 디렉토리에 있는 모든 jar 포함 (0) | 2022.07.05 |
---|---|
켄도 그리드(Vuex Store 포함), VueJs (0) | 2022.07.05 |
변수를 전달하여 Vuex 상태 데이터 가져오기 (0) | 2022.07.05 |
내보내기 Const에서 Vue 인스턴스 액세스 (0) | 2022.07.05 |
어레이의 모든 멤버를 동일한 값으로 초기화하려면 어떻게 해야 합니까? (0) | 2022.07.05 |