In vue, the v-for method is used to load local static images, and vuev-for method is used to load static images.

In vue, the v-for method is used to load local static images, and vuev-for method is used to load static images.

Put the local image in the vue-cli project in the assets Directory (the reason is that the vue image at the beginning of vue-cli is in, and all the images are in it );

Then v-for dynamically loads the image path.

Source code:

<Ul> <li v-for = "(item, index) in teamInfo" @ click = "trastFun (item)"> <div>  </div> <p >{{ item. name }}</p> <p >{{ item. position }}</p> <div class = "icon-vs"> VS </div> </li> </ul> for (var I = 0; I <self. teamInfo. length; I ++) {var j = I + 1; self. teamInfo [I]. imageurl = '.. /.. /assets/crop'{j}'.png ';}

The result shows that although the img src path is loaded in the browser, the image is not displayed. Baidu later found that webpack is packaged and parsed as a string, rather than a real path.

Change

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 a static image in the static directory at the beginning, this problem may not occur, and you may not consider it at the beginning.

In the above vue, the v-for Method for loading local static images is all the content shared by Alibaba Cloud xiaobian. I hope to give you a reference and support for the customer's house.