vue的动态添加本地图片和线上图片的区别 require()

119 阅读1分钟
<template>
  <div>
    <div v-for="(item,inx) in list" :key="inx">
      <h2>{{item.id}}</h2>
      <img :src="item.icon" />
    </div>
    <img src="@/assets/dam.jpg" alt="">
  </div>
</template>

如果是动态添加图片,需要加require()

<script>
export default {
  data() {
    return {
      list: [
        {
          id: 1,
          icon: require("@/assets/dam.jpg")//本地图片
        },
        {
          id:2,
          icon:'https://api.newoa.com/a7.png',
        }
      ]
    };
  },
};
</script>
<style scoped>
  img{
    width: 100px;
    height: 100px;
  }
</style>