v-vue에서 로컬 정적 이미지 메소드를 로드하는 경우

다음은 Vue에서 v-for를 사용하여 로컬 정적 이미지를 로드하는 방법에 대한 기사입니다. 좋은 참고 가치가 있으며 모든 사람에게 도움이 되기를 바랍니다.

vue-cli 프로젝트의 로컬 이미지는 자산 디렉토리에 배치됩니다(vue-cli의 초기 vue 이미지가 여기에 있으므로 모든 이미지가 여기에 배치됩니다).

그 후 v-for 이미지 경로를 동적으로 로드하는 데 문제가 발생했습니다.

소스 코드:

<ul>
<li v-for="(item,index) in teamInfo" @click="trastFun(item)">
<p><img  src="/static/imghwm/default1.png"  data-src="item.imageurl"  class="lazy"  v-bind:/ alt="v-vue에서 로컬 정적 이미지 메소드를 로드하는 경우" ></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 경로가 브라우저에 로드되었지만 나중에 이미지가 표시되지 않는 것으로 나타났습니다. 웹팩 패키지가 문자열로 구문 분석되었고 비실제 경로

가

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;);
}

로 변경되었음을 발견했습니다. 물론 정적 이미지가 처음에 정적 디렉터리에 배치된 경우 다음과 같습니다. 문제가 발생하지 않을 수도 있고, 처음부터 배려가 부족했습니다.

위 내용은 이 글의 전체 내용입니다. 모든 분들의 학습에 도움이 되었으면 좋겠습니다. 더 많은 관련 내용은 PHP 중국어 홈페이지를 주목해주세요!

관련 추천:

Vue를 사용하여 동적으로 양식을 생성하는 방법 소개

vue 이미지를 자르고 서버에 업로드하는 기능 소개

위 내용은 v-vue에서 로컬 정적 이미지 메소드를 로드하는 경우의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!