vue.js 이미지 리소스 경로가 잘못된 경우 어떻게 해야 할까요?

잘못된 vue.js 이미지 리소스 경로에 대한 해결 방법: 1. v-bind를 사용하여 이미지의 src 속성을 바인딩합니다. 2. 가져오기를 사용하여 이미지 경로를 도입합니다. 3. 이미지를 외부 정적 폴더에 배치합니다. 그런 다음 데이터에 imgUrl을 정의하십시오.

이 튜토리얼의 운영 환경: windows7 시스템, vue 버전 2.0, DELL G3 컴퓨터 이 방법은 모든 브랜드의 컴퓨터에 적합합니다.

【추천 관련 글: vue.js】

Vue.js 프로젝트에서 이미지를 참조할 때 이미지 경로와 관련하여 다음과 같은 상황이 있습니다.

사용:

데이터의 이미지 경로 정의:

 /*错误写法*/    imgUrl:'../assets/logo.png'

템플릿 템플릿에서:

/*错误写法*/   <img src="{{imgUrl}}">

위의 내용은 잘못된 작성 방법입니다. 이미지의 src 속성을 바인딩하려면 v-bind를 사용해야 합니다.

<img :src="imgUrl">
//或者 
<img src="../assets/logo.png">

이 방법은 일반 HTML 구문에 따른 경로를 참조합니다. , 템플릿에 배치할 수 있으며 webpack을 사용하여 패키징할 수 있습니다.

사용법 2:

js 코드에 이미지 경로를 작성해야 할 때 데이터에 작성하면 webpack은 이를 문자열로만 처리하고 이미지 주소를 찾을 수 없습니다.

작성 방법이 잘못되었습니다

imgUrl:'../assets/logo.png'

.

이때 가져오기를 사용하여 이미지 경로를 도입할 수 있습니다:

<img :src="imgUrl" />
import avatar from &#39;@/assets/logo.png&#39;

데이터에 정의: 아바타: 아바타

세 가지 사용:

이미지를 외부 정적 폴더에 넣은 다음 데이터에 정의할 수도 있습니다. :

아아아아

위 내용은 vue.js 이미지 리소스 경로가 잘못된 경우 어떻게 해야 할까요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!