vue-cli 스캐폴딩에 이미지를 도입하는 방법(코드)

이 글의 내용은 vue-cli 스캐폴딩에 이미지(코드)를 도입하는 방법에 대한 내용입니다. 필요한 친구들이 참고할 수 있기를 바랍니다.

1. 가져오기 방법

1단계: .vue 파일의 '경로'에서 편집 내용 가져오기(경로는 이미지와 .vue 사이의 상대 경로)

2단계: 데이터 개체에서 편집 속성 정의 , 값은 edit

에 해당합니다. 3단계: 속성을 템플릿의 레이블에 바인딩

마지막으로 인터페이스를 새로 고쳐 효과를 확인하세요!

2. 정적 메서드

1단계: 이미지를 정적 폴더에 배치하고 데이터 개체 중 하나에 pro_img 속성을 정의합니다. 속성 값은 이미지와 .vue

단계입니다. 2: 템플릿에서 태그에 속성 바인딩

효과를 보려면 새로 고침

vue 구성 요소 CSS의 배경 이미지 경로 오류 문제 해결

전제는 vue-cil을 사용한 다음 ExtractTextPlugin.extract(에서 ExtractTextPlugin.extract(를 찾는 것)입니다. 빌드 디렉터리 {}의 utils.js)에 다음 특성을 추가하면 publicPath 문제가 완벽하게 해결됩니다. '../../'

Explanation

파일은 결국 패키지되어 js로 압축됩니다. . 실행시 CSS의 상대경로가 루트디렉토리를 가리키도록 변경되어 로딩오류가 발생합니다.

다음은 이 플러그인에 대한 설명입니다.

extract-text-webpack-plugin

기능: 이 플러그인의 주요 목적은 CSS 스타일을 추출하고 js의 패키징 스타일로 인해 발생하는 페이지 스타일 로딩 장애를 방지하는 것입니다.

플러그인 매개변수: 플러그인에는 다음과 같은 의미를 지닌 세 가지 매개변수가 있습니다.

use: 파일을 컴파일하는 데 필요한 로더의 종류를 나타냅니다. 여기서는 소스 파일이 .css이므로 CSS를 선택합니다. 로더
fallback: CSS 파일 컴파일 후 이를 추출하는 데 사용되는 로더
publicfile: 프로젝트 경로를 덮어쓰고 CSS 파일의 파일 경로를 생성하는 데 사용됨

관련 권장 사항:

vue-cli 스캐폴딩 초기화 사용 방법

그래픽 분석 vue-cli 스캐폴딩 사용 방법

위 내용은 vue-cli 스캐폴딩에 이미지를 도입하는 방법(코드)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!