v-for loading local static image method in vue

Below I will share with you an article on how v-for loads local static images in vue. It has a good reference value and I hope it will be helpful to everyone.

The local images in the vue-cli project are 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  src="/static/imghwm/default1.png"  data-src="item.imageurl"  class="lazy"  v-bind:/ alt="v-for loading local static image method in 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;;
}

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

Changed to

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

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. .

The above is the entire content of this article. I hope it will be helpful to everyone's study. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

Introduction to using Vue to dynamically generate forms

vue implements the function of cropping images and uploading them to the server introduce

The above is the detailed content of v-for loading local static image method in vue. For more information, please follow other related articles on the PHP Chinese website!