javascript - 如何在vue中加载目录的图像

Question

我开始学习 vue.js 并向我提出了以下问题，我正在创建一个 SFC，并且在导出文件夹 src/assets/logo.png 中的图像时，我不加载图像，这是代码:

<template>
  <div id="app">
    <div class="row">
      <img :src="imagen" alt="" id="">
      <div class="col s12 m4">
        <your-list></your-list>
      </div>
    </div>
  </div>
</template>

<script>
import YourList from './components/YourList'

export default {
  name: 'app',
  components: {
    'your-list': YourList
  },
  data() {
    return{
      imagen: './assets/logo.png'
    }
    }
  }
</script>

<style lang="scss">
</style>

我找到的解决方案是通过以下方式导入 Logo :

<template>
  <div id="app">
    <div class="row">
      <img :src="imagen" alt="" id="">
      <div class="col s12 m4">
        <your-list></your-list>
      </div>
    </div>
  </div>
</template>

<script>
import YourList from './components/YourList'

export default {
  name: 'app',
  components: {
    'your-list': YourList
  },
  data() {
    return{
      imagen: './assets/logo.png'
    }
    }
  }
</script>


<style lang="scss">
</style>

我添加了一个导入来引入图像并能够显示它，我的疑问是，如果我必须使用 20 张图像，我就必须这样做，我不知道这是否是最佳方式。我正在使用@vue/cli

Answer 1

您可以使用 require 让 webpack 正确解析它。

data() {
  return {
    imagen: require('./assets/logo.png')
  }
}