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中加载目录的图像

1 个答案: