Как импортировать и использовать изображение в одном компоненте Vue?

Я думаю, что это должно быть простым, но я столкнулся с некоторыми проблемами в том, как импортировать и использовать изображение в одном компоненте Vue. Может ли кто-нибудь помочь мне, как это сделать? Вот мой фрагмент кода:

<template lang="html">
  <img src="zapierLogo" />
</template>

<script>
import zapierLogo from 'images/zapier_logo.svg'

export default {
}
</script>

<style lang="css">
</style>

Я пробовал использовать :src, src="{{ zapierLogo }}" и т.д., но ничего не работает. тоже не смог найти ни одного примера. Любая помощь?

Ответ 1

Проще, чем:

<template>
  <div id="app">
    <img src="./assets/logo.png">
  </div>
</template>

<script>
export default {
}
</script>

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

Взято из проекта, созданного vue cli.

Если вы хотите использовать свое изображение в качестве модуля, не забудьте связать данные с компонентом vuejs

<template>
  <div id="app">
    <img :src="image" />
  </div>
</template>

<script>
import image from "./assets/logo.png"


export default {
    data: function () {
        return {
            image: image
        }
    }
}
</script>

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

И более короткая версия:

<template>
  <div id="app">
    <img :src="require('./assets/logo.png')" />
  </div>
</template>

<script>
export default {
}
</script>

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

Ответ 2

Настоятельно рекомендуется использовать веб-пакет при импорте изображений из ресурсов и в целом для целей оптимизации и создания путей

Если вы хотите загрузить их через веб-пакет, вы можете просто использовать :src='require('path/to/file')'. Убедитесь, что вы используете :, иначе он не будет выполнять оператор require как Javascript.

В машинописном тексте вы можете выполнить почти ту же самую операцию: :src="require('@/assets/image.png')"

Почему следующее обычно считается плохой практикой:

<template>
  <div id="app">
    <img src="./assets/logo.png">
  </div>
</template>

<script>
export default {
}
</script>

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

При сборке с использованием Vue cli веб-пакет не может гарантировать, что файл ресурсов будет поддерживать структуру, которая соответствует относительному импорту. Это происходит из-за того, что webpack пытается оптимизировать и разбивать элементы на части внутри папки активов. Если вы хотите использовать относительный импорт, вы должны сделать это из папки static и использовать: <img src="./static/logo.png">

Ответ 3

Я недавно столкнулся с этой проблемой, и я использую Typescript. Если вы используете Typescript, как я, вам нужно импортировать ресурсы следующим образом:

<img src="@/assets/images/logo.png" alt="">

Ответ 4

Они оба работают для меня в JavaScript и TypeScript

<img src="@/assets/images/logo.png" alt="">

или

 <img src="./assets/images/logo.png" alt="">