Vue dynamic add the difference between local images and online images require ()

<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>
Copy the code

If you want to add images dynamically, require()

<script> export default { data() { return { list: [ { id: 1, icon: Require (" @ / assets/dam. JPG ") / / local picture}, {id: 2, icon: 'https://api.newoa.com/a7.png'}}; }}; </script> <style scoped> img{ width: 100px; height: 100px; } </style>Copy the code