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>

我找到的解决方案是通过以下方式导入徽标：

<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')
  }
}

vue加载目录图片的方法

How to load images of a directories in vue

javascript

webpack

vue.js

vuejs2

vue-cli