vue-cli 4 의 그림 표시 문 제 를 철저히 이해 하고 해결 합 니 다.

vue-cli실제 개발 과정 에서 많은 파트너 들 이 이미지 디 스 플레이 에 어려움 을 겪 을 수 있 습 니 다.아무리 설정 해도 이미지 가 표시 되 지 않 습 니 다.오늘 우 리 는 이 문 제 를 상세 하 게 이야기 하 겠 습 니 다.
그림 을 표시 할 수 없습니다.절대 부서 의 상황 은 그림 경로 문제 입 니 다.경로 문 제 를 이해 하려 면 상대 적 인 경로 와 절대 경로 가 있 습 니 다.
실제 개발 에서 그림 을 가장 많이 사용 하 는 장면 은 다음 과 같은 세 가지 가 있다.
1.수 동 도입

  <template>
    <img :src="imgurl" />
  </template>
  <script>
    import logo from '../img/logo.png'
    //  
    const logo = require('../img/logo.png');
    export default{
      data(){
        return {
          imgurl:logo
        }
      }
    }
  </script>

require 나 import 방식 으로 그림 을 도입 할 때 도입 경 로 는 현재 파일 경로 에 비해 컴 파일 할 때 웹 팩 이 개입 하여 서버 의 절대 경로 로 처리 합 니 다.
2.상대 경로

<img src="../img/logo.png" />

vue-cli에서 상대 경 로 를 사용 할 때 웹 팩 은 자동 으로 개입 되 고 위의 코드 는 컴 파일 할 때 자동 으로 변 합 니 다.

<img src="require('../img/logo.png')"

마지막 으로 페이지 에 표시 되 는 효 과 는 위 수 동 도입 방식 과 일치 합 니 다.
3.절대 경로

<img src="/img/logo.png" />

절대 경 로 를 사용 하려 면 먼저 서버 루트 디 렉 터 리 가 어디 에 있 는 지 알 아야 한다.vue-cli프로젝트 자체 에 서버 가 있 는 것 은webpack-dev-server모듈 을 바탕 으로 루트 디 렉 터 리 가public폴 더 이기 때문에 절대 경 로 를 이용 하여 그림 을 보 여 주 려 면 반드시public폴 더 에 그림 을 넣 어야 한다.이것 도 가장 간단 한 방식 이다.이러한 방식 은 웹 팩 이 개입 하지 않 기 때문에 최종 디 스 플레이 효 과 는 도입 시의 코드 와 일치 합 니 다.코드 는 다음 과 같 습 니 다.


최종 디 스 플레이 효과

4.데이터 의 그림

 <template>
    <ul>
      <li><img :src="item.imgurl" v-for="item in goodslist" /></li>
    </ul>
  </template>
  <script>
    export default{
      data(){
        return {
          goodslist:[{name:'goods1',imgurl:'../img/goods1.png'},{name:'goods2',imgurl:'../img/goods2.png'},{name:'goods3',imgurl:'../img/goods3.png'},
          ]
        }
      }
    }
  </script>

이러한 상황 은 가장 흔히 볼 수 있 는(ajax 요청 데이터 가 돌아 온 다음 페이지 구조 에 옮 겨 다 니 며 기록)일 것 입 니 다.이 럴 때src속성 에 연 결 된 변 수 는 수 동import또는require속성 에 있 는 경 로 를 직접 사용 하면 웹 팩 이 처리 에 개입 하지 않 기 때문에 상기 코드 는 그림 을 정상적으로 표시 할 수 없습니다.해결 방법 은 다음 과 같다.
방법 1:데 이 터 를 옮 겨 다 니 며 사용 하기 전에 수 동imgurl전단 에서 모듈 의 도입 기본 값 은 동적 도입 을 지원 하지 않 습 니 다(즉,지원 하지 않 습 니 다:require(변수)).다음 과 같 습 니 다.

 this.goodslist = this.goodslist.map(item=>{
    //         ，         `Cannot find module '../assets/logo.png'`
    // item.imgurl = require(item.imgurl);

    //       
    item.imgurl = require('../img'+item.imgurl.replace('../img',''))
    return item;
  })

파트너 가 이상 하 게 생각 할 수도 있 습 니 다.왜 이렇게 하면 됩 니까?웹 팩 은 동적 이름 모듈 이름 을 처리 할 때 식별 할 수 있 는 정적 경로 와 경로 의 모든 하위 파일 을 모듈 로 처리 합 니 다.예 를 들 어require디 렉 터 리 를 식별 하고 이 디 렉 터 리 의 모든 파일 을 모듈 로 처리 합 니 다.뒤에 일치 하도록 맵 맵 맵 을 만 들 기 때문에 해당 하 는 파일 을 식별 할 수 있 습 니 다.그 원 리 는require('../img'+imgName)이 고 속성 은 다음 과 같 습 니 다.
require.context(directory,useSubdirectories,regExp)

directory{String}-파일 을 읽 는 경로(보통 디 렉 터 리)

useSubdirectories{Boolean}-파일 의 하위 디 렉 터 리 를 옮 겨 다 닐 지 여부,기본 false

regExp{RegExp}-파일 과 일치 하 는 정규,기본 값 은 모든 파일 과 일치 합 니 다

방법 은 함수(fn 로 가정)를 되 돌려 줍 니 다.그림 경로(directory 가 포함 되 지 않 은 경로)를 입력 하면 처 리 된 그림 대응 경로(예 를 들 어 fn('/goods 1.png')를 얻 을 수 있 습 니 다.위의 코드 는 같은 효 과 를 가 집 니 다.

this.goodslist = this.goodslist.map(item=>{
    const fn = require.context('../img',false,/^\./);
    const file = item.replace('../img','.')
    item.imgurl = fn(file);
    return item;
  })

방법 2:데이터베이스 에서 절대 경 로 를 직접 사용 하고 필요 한 그림 을../img디 렉 터 리 에 넣 습 니 다.
imgurl 의 형식 은'/img/goods 1.png'입 니 다.
vue-cli 4 의 이미지 디 스 플레이 문 제 를 철저히 이해 하고 해결 하 는 데 관 한 이 글 은 여기까지 소개 되 었 습 니 다.더 많은 vue-cli 4 이미지 디 스 플레이 내용 은 우리 의 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 찾 아 보 세 요.앞으로 많은 응원 부탁드립니다!