vue 동적 설정 img 의 src 주소 가 잘못 되 었 습 니 다.npm run build 후 파일 해결 을 찾 을 수 없습니다.

동적 설정 img 의 src 속성 이 잘못 되 었 습 니 다.직접 쓰 면 됩 니 다.

해결 방법:
imgSrc 에서 require('path')로 쓰기;

원인:
동적 추가 src 는 정적 자원 으로 처리 되 어 컴 파일 되 지 않 았 습 니 다.

npm run build 후 xxxxxx net 출현::ERRFILE_NOT_FOUND
해결 방법:
입장:build 폴 더>webpack.prod.conf.js 열기
찾기:output 대상
추가:publicPath:'./'
구체 적 인 표기 법:

publicPath: process.env.NODE_ENV === 'production'
 ? './' +config.build.assetsPublicPath
 : './' + config.dev.assetsPublicPath

추가 지식:해결:vue 프로젝트 npm run build 패키지 후:src 경로 의 로 컬 그림 을 찾 을 수 없습니다.
문제 설명 및 오류 코드:

//     、      ok 
<img src="../../static/images/orderSeeProgress0.png">   
 
//         ok 、        (               )
<img src="/static/images/orderSeeProgress1.png">  
 
//         ok 、        (               )
<img :src="'../../static/images/orderSeeProgress'+index+'.png'">  

해결 방법:
(1)정적 그림 을 사용 하면 경로 주소 가 바 뀌 지 않 습 니 다.src 는 다음 과 같은 방법 을 사용 합 니 다.(상대 경로 의)
//로 컬 실행,포장 그림 은 ok 입 니 다.

(2)그림 이 데이터 에 따라 동적 으로 변화 한다 면:src(동적 으로 src 의 값 을 변경)를 사용 해 야 합 니 다.
(2-1)우선 설정 파일 에서 static 파일 에 별명 을 붙 입 니 다.(제 별명 은@@)
build/webpack.base.conf.js 설정 별명 은 다음 과 같 습 니 다.

resolve: {
  extensions: ['.js', '.vue', '.json'],
  alias: {
   'vue$': 'vue/dist/vue.esm.js',
   '@': resolve('src'),
   '@@': resolve('static'),
  }
 },

(2-2)그림 주 소 를 도입 한 다음 에 data 에서 정의 하고 src 에서 사용 합 니 다.

//     ：   、        ok 。
<img :src="orderPro1Img" />
<img :src="orderPro2Img" />
 
<script>
 import orderPro1 from '@@/images/orderSeeProgress0.png'
 import orderPro2 from '@@/images/orderSeeProgress1.png'
 export default {
  data() {
   return {
    msg: '',
    index:0,
    orderPro1Img:orderPro1,
    orderPro2Img:orderPro2
   }
  },
}
</script>

이상 vue 동적 설정 img 의 src 주소 가 잘못 되 었 습 니 다.npm run build 후 파일 을 찾 을 수 없 는 해결 은 바로 작은 편집 이 여러분 에 게 공유 하 는 모든 내용 입 니 다.참고 하 시 기 를 바 랍 니 다.여러분 들 도 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.