web-dev-qa-db-ja.com

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 }}"などを使用してみましたが、何も機能しないようです。例を見つけることもできませんでした。助けがありますか？

vue.jsvuejs2webpacker
30
aks

単純な ：

<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>
62
papey

それらをwebpackでロードしたい場合は、単に:src='require('path/to/file')'を使用できます。必ず:を使用してください。そうしないと、requireステートメントをJavascriptとして実行しません。

6
li x

最近この問題に出くわし、TypeScriptを使用しています。私のようにTypeScriptを使用している場合、次のようにアセットをインポートする必要があります。

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