Как загрузить изображения из каталогов в VUE - PullRequest
Новая
       16

Как загрузить изображения из каталогов в VUE

0 голосов
/ 16 мая 2019

Я начинаю изучать 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

1 Ответ

1 голос
/ 16 мая 2019

Вы можете использовать require, чтобы веб-пакет разрешил его правильно. 

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