vue 동적 로 컬 그림 불 러 오 는 처리 방법

문제점 을 발견 하 다
오늘 vue 파일 에 로 컬 그림 을 도입 하 는 문제 가 발생 하여 이 글 이 있 습 니 다.
보통 우리 의 img 라벨 은 html 에 이렇게 쓰 여 있 습 니 다.

<img src="../images/demo.png">

이 문법 은 상대 경로 아래 의 그림 만 인용 할 수 있다.절대 경 로 를 사용 할 수 없습니다.절대 경 로 를 사용 하면 이러한 자원 은 웹 팩 의 처 리 를 거치 지 않 고 직접 복사 된다.
src 가 변수 라면 저 희 는 보통 data 에서 변 수 를 정 하여 src 를 동적 으로 연결 합 니 다.

<img :src="src">

//data     src
data() {
  return {
    src: '../images/demo.png' 
  }
}

그러나 이 럴 때 그림 이 불 러 오지 않 고 그림 이 표시 되 지 않 은 것 을 발견 할 수 있 습 니 다.이 그림 의 주 소 를 보면.../images/demo.png 를 볼 수 있 습 니 다.즉,v-bind 형식 으로 연 결 된 상대 경 로 는 웹 팩 의 file-loader 에 의 해 처리 되 지 않 고 간단 한 텍스트 만 바 꿀 수 있 습 니 다.
그럼 어 떡 하지?
해결 방법
1、그림 을**base 64**형식 으로 변환

<img src="data:image/png;base64,iVBYKIGloxxxxxxxxxxxxxxxxxxx...">

일반적으로 그림 이 비교적 작은 것 은 이렇게 할 수 있다.예 를 들 어 아이콘 등 이 있 고 크기 는 보통 10KB 이내 이다.
2、사용**import**그림 도입

<img :src="src">

//  import  
import img from '../images/demo.png'

//data     src
data() {
  return {
    src: img 
  }
}

3、사용**require**동적 로드

<img :src="src">

//data     src
data() {
  return {
    src: require('../images/demo.png')
  }
}

4.**publicPath**를 도입 하고 이 를 경로 에 연결 하여 도입 경로 의 동적 변동 을 실현 한다.

<img :src="publicPath + 'images/demo.jpg'" alt=""> // √
//    :
<img src="/foo/images/demo.jpg" alt="">
<script>
export default:{
    data(){
        return {
          publicPath: process.env.BASE_URL,
        }
    },
}
</script>

vue.config.js 에 publicPath 경 로 를 설정 합 니 다:

//vue.config.js
module.exports = {
    publicPath:'/foo/',
    ...
}

결론.
정적 자원 은 두 가지 방식 으로 처리 할 수 있 습 니 다.

자 바스 크 립 트 가 져 오 거나 template/CSS 에서 상대 경 로 를 통 해 인 용 됩 니 다.이러한 인용 은 웹 팩 에 의 해 처 리 됩 니 다

4.567917.Public 디 렉 터 리 에 놓 거나 절대 경 로 를 통 해 참조 된다.이러한 자원 은 웹 팩 의 처 리 를 거치 지 않 고 직접 복사 된다의 원리
상대 경로 에서 가 져 오기
자 바스 크 립 트,CSS 또는*.vue 파일 에서 상대 적 인 경 로 를 사용 할 때 이 자원 은 웹 팩 의존 도 에 포 함 됩 니 다.
컴 파일 과정 에서,background:url(...),CSS@import 와 같은 모든 자원 URL 은 모듈 의존 으로 분 석 됩 니 다.
절대 경로 로 도입 할 때 경 로 는 Public 폴 더 의 자원 을 읽 습 니 다.Public 폴 더 에 설 치 된 정적 자원 은 컴 파일 된 디 렉 터 리 로 간단하게 복사 되 며 웹 팩 의 특수 처 리 를 거치 지 않 습 니 다.
도 메 인 이름 의 루트 경로 에 응용 프로그램 이 배치 되 었 을 때,예 를 들 어http://www.abc.com/이 도입 방식 은 정상적으로 표 시 될 수 있 지만,도 메 인 이름 의 루트 에 응용 프로그램 이 배치 되 지 않 았 다 면,URL 에 publicPath 접 두 사 를 설정 해 야 합 니 다.publicPath 는 응용 프로그램 패 키 지 를 배치 할 때의 기본 URL 입 니 다.vue.config.js 에서 설정 해 야 합 니 다.
넓히다
vue file-loader vs url-loader 에 대하 여
만약 우리 가 페이지 에 그림 을 도입 하 기 를 원한 다 면(img 의 src 와 background 의 url 포함).웹 팩 을 기반 으로 개발 할 때 그림 을 도입 하 는 데 문제 가 생 길 수 있 습 니 다.
그 중 하 나 는 경 로 를 인용 하 는 문제 다.background 스타일 을 url 로 배경 그림 을 도입 하면 웹 팩 은 최종 적 으로 각 모듈 을 하나의 파일 로 포장 할 것 이라는 것 을 알 고 있 습 니 다.따라서 우리 스타일 의 url 경 로 는 원본 css 파일 이 있 는 경로 가 아 닌 입구 html 페이지 에 있 습 니 다.이것 은 그림 도입 에 실패 하 게 될 것 이다.이 문 제 는 file-loader 로 해결 되 었 습 니 다.file-loader 는 프로젝트 의 url 도입(css 뿐만 아니 라)을 분석 할 수 있 습 니 다.우리 의 설정 에 따라 그림 을 해당 경로 로 복사 한 다음 에 우리 의 설정 에 따라 포장 후 파일 참조 경 로 를 수정 하여 정확 한 파일 을 가리 키 도록 합 니 다.
또한 그림 이 많 으 면 http 요청 을 많이 보 내 페이지 성능 이 떨 어 집 니 다.이 문 제 는 url-loader 를 통 해 해결 할 수 있다.url-loader 는 그림 인 코딩 을 도입 하여 dataurl 을 생 성 합 니 다.그림 데 이 터 를 문자열 로 번역 하 는 것 과 같다.이 문 자 를 파일 에 포장 하면 결국 이 파일 만 도입 하면 그림 에 접근 할 수 있 습 니 다.물론 그림 이 크 면 인 코딩 이 성능 을 소모 할 수 있다.따라서 url-loader 는 limit 바이트 보다 작은 파일 은 Dataurl 로 바 뀌 고 limit 보다 큰 파일 은 file-loader 를 사용 하여 copy 를 진행 합 니 다.
**url-loader 와 file-loader 는 어떤 관계 입 니까?**간단하게 말 하면 url-loader 는 file-loader 를 봉 했다.url-loader 는 file-loader 에 의존 하지 않 습 니 다.즉,url-loader 를 사용 할 때 url-loader 만 설치 하면 됩 니 다.file-loader 를 설치 할 필요 가 없습니다.url-loader 에 file-loader 가 내장 되 어 있 기 때 문 입 니 다.위의 소 개 를 통 해 알 수 있 듯 이 url-loader 작업 은 두 가지 상황 으로 나 뉜 다.1.파일 크기 가 limit 매개 변수 보다 작 으 면 url-loader 는 파일 을 DataURL 로 변환 할 것 이다.2.파일 크기 가 limit 보다 크 면 url-loader 는 file-loader 를 호출 하여 처리 하고 매개 변 수 는 file-loader 에 직접 전 달 됩 니 다.따라서 우 리 는 url-loader 만 설치 하면 된다.
원본 링크:https://www.cnblogs.com/weizaiyes/p/7461967.html
background url 그림 도입 시
위의 이론 에 따 르 면 만약 에 제 가 상대 적 인 경로 로 그림 을 도입 하면 webpack 은 require 를 처리 할 것 입 니 다.

background: url('./iphonexs.png') 0 0 no-repeat;

사실은 그렇습니다.페이지 의 배경 이 다음 과 같 아 지 는 것 을 보 았 습 니 다.

background: url(/resources/dist/images/iphonexs.a25bee7.png) 0 0 no-repeat;

이것 은 url-loader 의 설정 에 따라 처리 한 결과 입 니 다.
또는 동적 스타일 로:

<div 
  :style="{'background': 'url(' + require('./iphonexs.png') + ') 0 0 no-repeat'}">
</div>

Reference
cli.vuejs.org/zh/guide/ht …
https://www.jb51.net/article/163170.htm
github.com/vuejs/vue-c …
총결산
vue 동적 으로 로 컬 그림 을 불 러 오 는 것 에 관 한 이 글 은 여기까지 소개 되 었 습 니 다.더 많은 vue 동적 으로 로 컬 그림 을 불 러 오 는 내용 은 우리 의 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 찾 아 보 세 요.앞으로 많은 응원 바 랍 니 다!