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:

{{item.name}}
{{item.position}}
VS


for(var i = 0;i
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
 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!