如何处理vue中assets的图标

Question

我尝试使用以 JSON 数据命名的图像，这些图像位于我在 Vue 中的资产中：我的 JSON:

    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>

但我总是收到 404，如何使用我的资产文件夹中的图像？

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)

Answer 1

您不能要求图片。根据您的捆绑解决方案，您应该能够做到这一点

<q-img :src="'../assets/icons/' + card.image)" basic />

Answer 2

我必须像 public/images 一样使用 public 文件夹并使用

访问它们

:src="'/images/' + card.image"

现在一切正常。

如何处理vue中assets的图标

how to deal with icons from assets in vue

vue.js

quasar-framework