vue2.x中关于引用图片的问题

vue中引用图片的几种情况

错误片段一

<!-- template -->
<img :src="p" alt="" width="500px" height="350px">

<!-- script -->
props: {
    text1: String,
    text2: String,
    photoName: String
  },
  computed: {
    p: {
      get() {
        let path=`../assets/${this.photoName}`;
        return require(path);
      }
    }
  }

此处的require使用后，会报如下错误：

错误片段二

<!-- template -->
<img :src="require(photoName)" alt="" width="500px" height="350px">
<!-- <img :src="require(`${photoName}`)" alt="" width="500px" height="350px">
    这样也会报错，不要试图直接用变量
 -->

<!-- script -->
props: {
    text1: String,
    text2: String,
    photoName: String
  },

出现如下报错

正确引用图片

方式一：

使用img标签，实现动态切换图片

<img :src="require(`../assets/${this.photoName}`)" alt="" width="500px" height="350px">

再次强调，不能直接在require中直接填一个变量当作参数，require中的参数必须直接是一个字符串，否则就会报错

方式二；

直接使用img标签

<div id="menu"><img src="./assets/icon/menue.png"></div>

方式三：

通过父组件传对象

<!-- 父组件 -->
<!--template -->
<CardModel class="card" v-for="p in picture" :picture="p" :key="p.id"></CardModel>

<!--script 片段 -->
data() {
    return {
      p: [{
        id:'001',
         photoName: require("../assets/portfolio-1.jpg")
      },{
        id:'002',
        photoName: require("../assets/portfolio.jpg")
      },{
        id:'003',
        photoName: require("../assets/portfolio-3.jpg")
      },{
        id:'004',
        photoName: require("../assets/portfolio-4.jpg")
      },
      ]
    }
  }

<!-- 子组件 -->
<!--template -->
 <img :src="picture.photoName" alt="" width="500px" height="350px">

<!--script 片段 -->
<!-- 接收对象 -->
props: {
    picture:Object
  },

此次记录到此结束~~