다음은 Vue에서 v-for를 사용하여 로컬 정적 이미지를 로드하는 방법에 대한 기사입니다. 좋은 참고 가치가 있으며 모든 사람에게 도움이 되기를 바랍니다.
vue-cli 프로젝트의 로컬 이미지는 자산 디렉토리에 배치됩니다(vue-cli의 초기 vue 이미지가 여기에 있으므로 모든 이미지가 여기에 배치됩니다).
그 후 v-for 이미지 경로를 동적으로 로드하는 데 문제가 발생했습니다.
소스 코드:
<ul> <li v-for="(item,index) in teamInfo" @click="trastFun(item)"> <p><img v-bind:src="item.imageurl"/></p> <p>{{item.name}}</p> <p>{{item.position}}</p> <p class="icon-vs">VS</p> </li> </ul> for(var i = 0;i<self.teamInfo.length;i++){ var j= i+1; self.teamInfo[i].imageurl = '../../assets/crop'+j+'.png'; }
img의 src 경로가 브라우저에 로드되었지만 나중에 이미지가 표시되지 않는 것으로 나타났습니다. 웹팩 패키지가 문자열로 구문 분석되었고 비실제 경로
가
for(var i = 0;i<self.teamInfo.length;i++){ var j= i+1; self.teamInfo[i].imageurl = require('../../assets/crop'+j+'.png'); }
로 변경되었음을 발견했습니다. 물론 정적 이미지가 처음에 정적 디렉터리에 배치된 경우 다음과 같습니다. 문제가 발생하지 않을 수도 있고, 처음부터 배려가 부족했습니다.
위 내용은 이 글의 전체 내용입니다. 모든 분들의 학습에 도움이 되었으면 좋겠습니다. 더 많은 관련 내용은 PHP 중국어 홈페이지를 주목해주세요!
관련 추천:
위 내용은 v-vue에서 로컬 정적 이미지 메소드를 로드하는 경우의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!