Vue에서 배경 이미지 설정

이제 Vue 프로젝트에서 배경 이미지를 설정하는 방법을 공유하겠습니다. 참고할 가치가 높으며 모든 사람에게 도움이 되기를 바랍니다.

Vue 프로젝트 개발 시 페이지에 배경 이미지를 추가하는 경우가 종종 있는데, 배경 이미지를 스타일에 추가하고 컴파일하고 패키징하여 서버에 구성하면 경로 해상도 문제로 인해 이미지가 올바르지 않습니다. 가 다음과 같은 CSS 스타일로 표시됩니다.

background:url("../../assets/head.jpg");

현재는 다른 방법을 사용하는 것을 고려해야 합니다. Node는 이 문제를 해결하는 더 효과적인 방법을 제공합니다.

1 다음과 같이 데이터에 정의합니다.

 export default {
 name: 'productdetailspage',
 data() {
  return {
   note: {
   backgroundImage: "url(" + require("../../assets/save.png") + ")",
   backgroundRepeat: "no-repeat",
   backgroundSize: "25px auto",
   marginTop: "5px",
   },
  }
 },

2. 인라인 스타일을 통해 스타일을 도입하면

<p class="note" :style ="note"></p>

이 문제를 완벽하게 해결할 수 있습니다.

위 내용은 모두를 위해 제가 정리한 내용입니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다.

관련 기사:

Vue2.0에서 http 요청 구현 및 디스플레이 로드

노드에서 프로세스 및 child_process 모듈을 학습하는 방법(자세한 튜토리얼)

jQuery의 도메인 간 요청 방법을 통해 +JSONP(자세한 튜토리얼)

위 내용은 Vue에서 배경 이미지 설정의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!