Vue uses v-for to dynamically render data, and solves the problem that the picture does not display

One: The picture does not display

First: There are three ways we can get pictures

<!-- 第一种展示图片方法 -->
<img v-bind:src="item.imgUrl"/>
<!-- 第二种展示图片方法 -->
<image :src="item.imgUrl"/>
<!-- 第三种展示图片方法 -->
//引入
import img1 from '../static/imgage/img1.png'
//注册
component: {
  img1
}
//使用
<img :src="img1" />

Second : When we obtain the image path, the loader cannot read the image path, and we cannot directly   write the image path  img:'../assets/logo.png'  in the data we obtain . This is a wrong way of writing. The correct way to write it is as follows: 

imgUrl:require('../assets/logo.png')

Two: v-for dynamic rendering data instance

html code:

  <div v-for="(item) in date" class="box">
        <p>{
   
   {item.title}}</p>
        <p>{
   
   {item.content}}</p>
        <img v-bind:src="item.imgUrl"/>
        <!-- 第二种展示图片方法 -->
        <!-- <image :src="item.imgUrl"/> -->
    </div>

js code:

<script>
export default {
    data() {
        return {
            date:[
                    {title:"测试案例",content:'第一次猜测',imgUrl:require('../assets/logo.png')},
                    {title:"测试案例1",content:"第二次猜测",imgUrl:require('../assets/home2.png')}
                ]
        }
    }
}
</script>

css style:

<style>
    .box{
        width: 200px;
        margin: 10px;
        border: 4px solid green;
        display: inline-block;
        padding: 10px;
     }
    img{
        width: 50px;
    }
</style>

Three: Show the effect

 Favorites can be collected!