Implement the method of loading local static images through v-for in vue (detailed tutorial)

Below I will share with you an article about the v-for loading local static image method 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
        

         Copy after login
        
       

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
        

         Copy after login
        
       

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

Vue project turns off eslint verification

JS method to implement traversing irregular multi-dimensional arrays

#JS implementation example of adding event function to dynamically added elements

# #

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