vue-cil 과 webpack 에서 로 컬 정적 그림 의 경로 문제 해결 방안 을 자세히 설명 합 니 다.

본 고 는 vue-cil 과 webpack 에서 로 컬 정적 이미지 의 경로 문제 해결 방안 을 소개 하고 여러분 에 게 공유 합 니 다.구체 적 으로 다음 과 같 습 니 다.
1 로 컬 그림 동적 귀속 img 의 src 속성
일반적으로 html 나 vue 구성 요소 파일 에서 그림 을 참조 하 는 것 은 이 렇 습 니 다.이것 은 특별 처리 할 필요 가 없습니다.


저 희 는 assets 에 그림 을 넣 거나 폴 더 img 을 다시 만 들 거나 마음대로 하 세 요~
그러나 우리 가 이 럴 때 필요 한 것 은 우리 가 로 컬 그림 을 동적 으로 연결 해 야 한 다 는 것 이다.

1.그림 을 모듈 로 먼저 도입 한 다음 에 귀속 한다.

그러나 이런 방법 은 한계 가 크 고 모듈 화가 떨 어 지 며 코드 가 보기 싫다.
만약 에 제 가 순수한 정적 인 사이트 전 시 를 한다 면 많은 로 컬 정적 자원 을 불 러 와 야 합 니 다.그 안에 로 컬 데이터 와 로 컬 이미지 가 혼 합 된 여러 그룹 이 포함 되 어 있 습 니 다.귀 찮 게 하 는 것 이 아 닙 니 다~
1.1 그래서 우 리 는 세 걸음 이 필요 하 다.
첫 번 째 단 계 는 src 아래 에 json 폴 더 에 정적 json 데 이 터 를 설치 합 니 다.

두 번 째 단 계 는 src 와 같은 등급 의 디 렉 터 리 에 있 는 static 폴 더 에 모든 정적 그림 자원 을 두 는 것 입 니 다.

세 번 째 단 계 는 자 연 스 러 운'..././static/img/xxx.png'로 쓸 수도 있 고 빨 간 상자 에 있 는 쓰기 로 쓸 수도 있 습 니 다.

이렇게 하면 일반적인 동적 으로 src 속성 을 연결 합 니 다.당신 의 이미지 경 로 는 개발 모델 과 생산 모델 에서 의 이미지 자원 경로 에 문제 가 없 을 것 입 니 다.
1.2 작은 문제
그러나 문 제 는 이런 방식 으로 그림 을 인용 하면 url 등 로 더 에 의 해 처리 되 지 않 는 다 는 것 이다.

위의 빨 간 상 자 는 모두 이런 방식 입 니 다.맨 아래 의 빨 간 상 자 는 require 방식 으로 그림 을 도입 합 니 다.(모듈 로 url-loader 에 의 해 처리 되 고 hash 값 이 추가 되 었 습 니 다)
이것 은 사이트 자체 의 성격 과 구체 적 인 업무,그리고 개인 적 인 취 사 를 봐 야 합 니 다.물론 혼합 해서 사용 할 수도 있 습 니 다.유연 하고 죽지 않 는 처리 방법 입 니 다!
2 css 의 로 컬 그림 경로 가 포 장 된 문제
당신 의 프로젝트 는 개발 모드 에서 css 에서 url()로 그림 을 인용 하 는 것 은 정상 이지 만,포장 후 그림 경 로 는 처리 되 지 않 았 거나 이상 하 다 고 말 하지 않 았 습 니 다.
로 컬 이미지 자원 을 불 러 올 수 없 게 되 었 습 니 다.이런 곤 혹 스 러 움 이 있 습 니까?
기 존의 플러그 인 에 코드 를 추가 하면 됩 니 다.

이 플러그 인 은 모두 가 잘 알 고 있 을 것 입 니 다.바로 css 를 포장 에서 단독으로 추출 하여 폴 더 로 하 는 것 입 니 다.위 에 있 는 이것 은 vue-cil 의 컴 파일 템 플 릿 입 니 다.이 를 참고 하 시기 바 랍 니 다.
publicPath 라 는 설정 속성의 구체 적 인 다른 용법 은 홈 페이지 에 가서 보 거나 소스 코드 를 볼 수 있 습 니 다.
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.