이제 Vue에서 로컬 정적 이미지를 로드하는 방법에 대한 기사를 공유하겠습니다. 이는 좋은 참고 가치가 있으며 모든 사람에게 도움이 되기를 바랍니다.
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 경로가 브라우저에 로드되었지만 나중에 이미지가 표시되지 않는 것으로 나타났습니다. webpack 패키지가 문자열로 구문 분석되었으며 비실제 경로
가
for(var i = 0;i<self.teamInfo.length;i++){ var j= i+1; self.teamInfo[i].imageurl = require('../../assets/crop'+j+'.png'); }
로 변경되었음을 확인했습니다. 위 내용은 모두에게 도움이 되기를 바랍니다. 미래. Related Articles :
vue 프로젝트는 Eslint verification js 메소드를 끄기 위해 불규칙한 다차원 배열 옵션을 구현하여 동적으로 추가 된 요소에 대한 이벤트 함수 추가의 예제위 내용은 vue에서 v-for를 통해 로컬 정적 이미지를 로드하는 방법 구현(자세한 튜토리얼)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!