How to load local static images with v-for

This time I will show you how v-for loads local static pictures, what are the precautions for v-for to load local static pictures, the following is a practical case, let’s take a look take a look.

vue-cli project This map file is placed in the assets directory (because the initial vue image of vue-cli is in it, so all the images are placed in it);

After that v-for encountered a problem when dynamically loading the image path

Source code:

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

It turned out that although the src path of img was loaded in the browser, the image was not displayed. Baidu later found that the webpack package was parsed into string instead of the real path

. For

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

Of course, if you put the static pictures in the static directory at the beginning, such a problem may not occur, and there was a lack of consideration from the beginning.

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

Detailed graphic explanation of Vue.directive()

Node.js crawling Douban data example

The above is the detailed content of How to load local static images with v-for. For more information, please follow other related articles on the PHP Chinese website!