Vue は v-for を使用してデータを動的にレンダリングし、画像が表示されない問題を解決します

1: 画像が表示されない

1つ目：写真を入手するには3つの方法があります

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

2つ目：画像のパスを取得すると、ローダーは画像のパスを読み取ることができず、取得したデータに画像のパス img:'../assets/logo.png'  を直接書き込むことができません  .これは間違った書き方です. . 正しい書き方は次のとおりです。 

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

2: v-動的レンダリング データ インスタンス用

html コード:

  <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 コード:

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

CSS スタイル:

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

三：効果を見せる

 お気に入りを集めることができます！