vue 동적 불 러 오기 그림 src 솔 루 션

오 랜 만 에 더 넓 어 졌 습 니 다.최근 에 무엇 을 하고 있 는 지 모 르 겠 습 니 다.아무튼 바 쁜 것 같 습 니 다.사람들 속 에서 vue 에 들 어 온 젊은이 들 이 vue 에 게 동적 으로 그림 을 불 러 오 는 것 이 항상 404 상황 이 라 고 물 었 습 니 다.이 편 은 왜 나타 나 고 해결 방법 이 어떤 것 이 있 는 지 간단하게 설명 합 니 다.
우선 vue-cli 의 assets 와 static 의 두 파일 의 차 이 를 설명 하 세 요.뒤의 해결 방법 을 이해 하 는 데 도움 이 되 기 때 문 입 니 다.
assets:프로젝트 컴 파일 과정 에서 웹 팩 처리 에 의 해 모듈 의존 으로 분 석 됩 니 다.'img src='./logo.png'와 background:url(./logo.png),'./logo.png'는 상대 적 인 자원 경로 로 웹 팩 을 모듈 의존 으로 분석 합 니 다.
static:이 디 렉 터 리 에서 파일 은 웹 팩 에 의 해 처리 되 지 않 습 니 다.쉽게 말 하면 제3자 파일 을 저장 하 는 곳 은 웹 팩 에 의 해 해석 되 지 않 습 니 다.그 는 최종 패키지 디 렉 터 리(기본 값 은 dist/static)로 직접 복 사 됩 니 다.이 파일 들 을 절대 경로 로 참조 해 야 합 니 다.이것 은 config.js 파일 의 build.assets Public 와 build.asserts SubDirectory 링크 를 통 해 확인 되 었 습 니 다.static/에 있 는 모든 파일 은 절대 경로 로 참조 해 야 합 니 다:/static[filename]
웹 팩 의 특성 에 따라 전반적 으로 static 에서 변동 이 없 는 세 번 째 파일,asserts 에서 변동 이 있 을 수 있 는 파일 을 넣 습 니 다.
문제 가 생 겼 습 니 다.js 동적 으로 assets 나 이 파일 의 그림 을 불 러 오 면 404 상태 코드 가 나타 납 니 다.
코드 인 스 턴 스

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

달 려 보 니 그림 이 표시 되 지 않 았 습 니 다.오류 코드 는 404 입 니 다.
원인:웹 팩 에 서 는 그림 그림 을 모듈 로 사용 합 니 다.동적 으로 불 러 오기 때문에 url-loader 는 그림 주 소 를 분석 할 수 없습니다.그리고 npm run dev 또는 npm run build 이후 경로 가 가공 되 지 않 습 니 다.[웹 팩 에 의 해 분 석 된 경 로 는 모두/static/img/[filename].png 로 분 석 됩 니 다.전체 주 소 는 localhost:8080/static/img/[filename].png]
해결 방법:
① 그림 을 모듈 로 불 러 옵 니 다.예 를 들 어 images:[{src:require('/1.png')},{src:require('/2.png')}]이렇게 웹 팩 을 해석 할 수 있 습 니 다.
② static 디 렉 터 리 에 그림 을 넣 지만 images:[{src:"/static/1.png"},{src:"/static/2.png"}과 같은 절대 경로 로 써 야 합 니 다.물론 웹 팩.base.config.js 정 의 를 통 해 경로 의 쓰기 길 이 를 줄 일 수 있 습 니 다.
물론 로 컬 사진 이 너무 많 을 때 이렇게 쓰 는 것 이 귀 찮 지 않 겠 습 니까?그러면 사실은 우 리 는 이렇게 간단 한 조작 을 합 니 다.
첫 번 째 단계:static 에 json 폴 더 를 새로 만 듭 니 다.

제2 부:json 파일 작성,그림 참조

세 번 째 부분:json 을 응답 하 는 vue 파일 에 도입 하여 인용 을 해석 하면 됩 니 다.

질문 이 있 으 시 면 토론 을 환영 합 니 다.
이상 의 vue 동적 으로 그림 src 를 불 러 오 는 해결 방법 은 바로 작은 편집 이 여러분 에 게 공유 하 는 모든 내용 입 니 다.여러분 께 참고 가 되 고 저희 도 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.