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

亚连
풀어 주다: 2018-06-01 15:28:47
원래의
3304명이 탐색했습니다.

이제 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿