How to use the require/import keyword to introduce local pictures in the v-for loop

Editor to share with you how to use the require/import keyword to introduce local pictures in the v-for cycle, I believe most people do not know much about it, so share this article for your reference. I hope you will learn a lot after reading this article. Let's learn about it together.

Problem description

When we do a project, we often need to render the picture on the page. Generally speaking, there are several ways

Method 1 (the backend returns the image URL)

In this way, the backend returns the url address of the image. We can directly bind the src attribute of the img tag to imgUrl. The code is as follows:

Method 2 (require is used in the front end)

In the second way, the image file is stored in the front end, and the back end only returns the name of the image (or does not return image data). The code example is as follows:

Code attached

Rank: {{item.title}} score: {{item.score}} export default {data () {return {apiArr: [],} }, mounted () {/ / suppose apiArr is the data returned by the backend of our request, and the imgTitle attribute stores the name of the image / / introduced by the require keyword Will automatically find the corresponding image file in the specified path to load this.apiArr = [{title: "champion", score: "98.8", imgTitle:" first ",}, {title:" runner-up ", score:" 97.9", imgTitle: "second",} {title: "third Runner-up", score: "96.2", imgTitle: "third",},] },}

The effect picture is as follows

Project file structure diagram

Method 3 (use import at the front end)

Code attached

Ranking: {{item.title}} score: {{item.score}} / / import introduces picture import first from "@ / assets/img/first.png"; import second from "@ / assets/img/second.png" Import third from'@ / assets/img/third.png'export default {data () {return {apiArr: [{title: "champion", score: "98.8", imgTitle: first, / / use the introduced image}, {title:" runner-up ", score:" 97.9" ImgTitle: second, / / use introduced pictures}, {title: "third Runner-up", score: "96.2", imgTitle: third, / / use introduced images},],} },}

The effect diagram and the project file structure diagram are the same as above, which will not be discussed here.

The above is all the content of the article "how to use the require/import keyword to introduce local pictures in the v-for loop". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!