vue가 이미지 소스의 동적 로딩을 구현하는 방법에 대해-JS 튜토리얼-php.cn

vue가 이미지 소스의 동적 로딩을 구현하는 방법에 대해

亚连

풀어 주다： 2018-06-07 17:03:42

원래의

5339명이 탐색했습니다.

이제 vue를 기반으로 이미지 src를 동적으로 로드하는 솔루션을 공유하겠습니다. 이는 좋은 참조 값을 가지고 있으며 모든 사람에게 도움이 되기를 바랍니다.

오랫동안 블로그를 안해서 무슨 일로 바빴는지 모르겠네요. 아무튼 그룹에서 Vue를 처음 접하는 친구들이 상태에 대해 물어보는 걸 봤어요. 동적으로 로드된 이미지는 그룹에서 항상 404를 얻습니다. 이 문서에서는 이 문제가 발생하는 이유와 해결 방법에 대해 간략하게 설명합니다.

먼저 vue-cli 자산과 정적의 두 파일 간의 차이점을 설명하겠습니다. 다음 솔루션을 이해하는 데 도움이 될 것입니다.

자산:프로젝트 중에 webpack에 의해 처리되고 구문 분석됩니다. 컴파일 프로세스 이는 모듈 종속성이며 < img src="./logo.png"> "는 상대 리소스 경로입니다. Webpack은 이를 모듈 종속성으로 해결합니다.

static: 이 디렉터리의 파일은 webpack에서 처리되지 않습니다. 간단히 말해서 타사 파일이 저장된 위치는 webpack에서 구문 분석되지 않는다는 의미입니다. 최종 패키징 디렉터리에 직접 복사됩니다(기본값은 dist/static). 이러한 파일은 config.js 파일의 build.assetsPublic 및 build.assertsSubDirectory 링크를 통해 결정되는 절대 경로를 사용하여 참조되어야 합니다. static/에 있는 모든 파일은 절대 경로인 /static[파일 이름]

형식으로 참조되어야 합니다. 일반적으로 webpack의 특성에 따라 정적 파일은 세 번째 파일이 변경되지 않을 수 있습니다. . 파일

문제가 발생합니다. js를 사용하여 자산을 동적으로 로드하지 않으면 이 파일의 그림이 404 상태 코드와 함께 표시됩니다

코드 예시

<li v-for="(item,index) in images" :key="index">
<img :src="item.src"></li>
//js部分
data(){
 return {
 images:[{src:&#39;./1.png&#39;},{./2.png}]
 }
}

로그인 후 복사

실행해 보니 그림이 나타납니다. 표시되지 않았고 오류 코드가 404였습니다.

이유: webpack에서는 이미지가 모듈로 사용됩니다. 이미지는 동적으로 로드되기 때문에 url-loader는 이미지 주소를 구문 분석할 수 없습니다. 그러면 npm을 실행한 후 dev 또는 npm 실행 빌드, 경로는 처리되지 않습니다. [webpack에서 구문 분석된 경로]는 /static/img/[filename].png로 구문 분석되며 전체 주소는 localhost:8080/static/img/[filename].png입니다.

해결책:

①이미지를 모듈로 사용 이미지:[{src:require('./1.png')},{src:require('. /2.png')}] 웹팩이 구문 분석할 수 있도록 합니다.

②이미지를 static 디렉터리에 넣되, Images:[{src:”/static/1.png”},{src:”/static/2.png”}]와 같이 절대 경로로 작성해야 합니다. 이미지도 표시되도록 하려면 물론 webpack.base.config.js에서 경로를 정의하여 경로 작성 길이를 단축할 수도 있습니다.

물론 로컬 이미지가 너무 많으면 이렇게 작성하는 것이 번거롭다고 하셨죠. 그런데 사실 저희는 이렇게 작업을 단순화합니다. step 1 : static

part 2에서 새 JSON 폴더 생성 : showpart 3 : JSON을 응답을 소개하는 vue 파일을 참조하여 구문 분석하세요.