>  기사  >  웹 프론트엔드  >  v-for를 사용하여 로컬 정적 이미지를 로드하는 방법

v-for를 사용하여 로컬 정적 이미지를 로드하는 방법

php中世界最好的语言
php中世界最好的语言원래의
2018-03-27 16:00:102044검색

이번에는 v-for가 로컬 정적 이미지를 로드하는 방법과 v-for가 로컬 정적 이미지를 로드하는 데 어떤 주의사항이 있는지 보여드리겠습니다. 다음은 실제 사례입니다. 살펴보겠습니다.

vue-cli 프로젝트 이

map 파일은 자산 디렉토리에 배치됩니다(vue-cli의 초기 vue 이미지가 여기에 있으므로 모든 이미지가 여기에 배치됩니다).

는 v-로 동적으로 로드됩니다. for after 이미지 경로에 문제가 발생했습니다

소스 코드:

<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 경로가 브라우저에 로드되었지만 Baidu는 나중에 이미지가 표시되지 않는 것으로 나타났습니다. webpack 패키지는

string로 파싱되었으며, 실제 경로 대신

for(var i = 0;i<self.teamInfo.length;i++){
var j= i+1;
self.teamInfo[i].imageurl = require('../../assets/crop'+j+'.png');
}
로 변경되었습니다. 물론 처음에 정적 이미지를 정적 디렉터리에 배치하면 이러한 문제가 발생하지 않을 수 있으며, 처음부터 배려가 부족하다.

이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 자료:

Vue.directive()

Node.js 크롤링 Douban 데이터 예제
에 대한 자세한 그래픽 설명

위 내용은 v-for를 사용하여 로컬 정적 이미지를 로드하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.