问如何在vue中处理资源中的图标

EN

    cards: [
      {
        title: 'my Title'
        image: 'myimagename.png'
        style: 'color: green'
      },
        title: 'another Title'
        image: 'myotherimagename.png',
        style: 'color: red'
      }
    ]

    <q-card :style="card.style" class="dashboard-card text-white q-mt-md" v-for="card in cards"
        :key="card.id" style="height: 132px; width: 132px">
  <q-card-section dense>
    <q-img
      :src="require('../assets/icons/' + card.image)"
      basic
    />
    <div class="dashboard-card-title"> {{ card.title }}</div>
  </q-card-section>
</q-card>

Error: Cannot find module './myimagename.png'
    at webpackContextResolve (eval at ./src/assets/icons sync recursive ^\.\/.*$ (0.js:218), <anonymous>:27:11)
    at webpackContext (eval at ./src/assets/icons sync recursive ^\.\/.*$ (0.js:218), <anonymous>:22:11)