Home >Web Front-end >JS Tutorial >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 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 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('../../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. .
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!