vue에서 v-for를 통해 로컬 정적 이미지를 로드하는 방법 구현(자세한 튜토리얼)

이제 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 = &#39;../../assets/crop&#39;+j+&#39;.png&#39;;
}

img의 src 경로가 브라우저에 로드되었지만 나중에 이미지가 표시되지 않는 것으로 나타났습니다. webpack 패키지가 문자열로 구문 분석되었으며 비실제 경로

가

for(var i = 0;i<self.teamInfo.length;i++){
var j= i+1;
self.teamInfo[i].imageurl = require(&#39;../../assets/crop&#39;+j+&#39;.png&#39;);
}

로 변경되었음을 확인했습니다. 위 내용은 모두에게 도움이 되기를 바랍니다. 미래. Related Articles :

vue 프로젝트는 Eslint verification

js 메소드를 끄기 위해 불규칙한 다차원 배열 옵션을 구현하여 동적으로 추가 된 요소에 대한 이벤트 함수 추가의 예제

위 내용은 vue에서 v-for를 통해 로컬 정적 이미지를 로드하는 방법 구현(자세한 튜토리얼)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!