web-dev-qa-db-ja.com

img srcをVueのデータにバインドする方法

私はvue webpackスクリプトに次のようにしています：

<script>
  export default {
    data () {
      return {
        repos: [
          {name: 'test1', src: '../assets/logo.png'},
          {name: 'test2', src: '../assets/underscore.png'},
           ...
        ]
      }
    }
  }
</script>

そして、私のhtmlで、ローカルのsrc要素をimgにバインドしようとしていますが、機能させることができません。これが私のhtmlがどのように見えるかです：

<div v-for="repo in repos" :key="repo.name">
  <img :src="repo.src" />
</div>

私のimgソースが次のようにデータにバインドされていない場合は正常に動作します。

<img :src="../assets/logo.png" />

ローカルイメージがVueでデータバインドされている場合、ロードされないのはなぜですか？

私のディレクトリは次のようになります：

enter image description here

javascripthtmlimagewebpackvue.js
6
rockzombie2

vue-cliを使用している場合は、画像も含めてすべてがモジュールとして処理されることを覚えておく必要があります。次のように、パスがJSでの相対パスである場合は、requireを使用する必要があります。

{ name: 'test1', src: require('../assets/logo.png') }

詳細については、こちらをご覧ください。 http://vuejs-templates.github.io/webpack/static.html

17
Bill Criswell

単にimg srcをデータにバインドするために、file addressを必要とするだけです：

<img v-bind:src="require('../image-address/' + image data)" />

以下の例は../ assets/logo.png：を示しています

<template>
          <img v-bind:src="require('../assets/' + img)" />
</template>

<script>
export default {
  data: function() {
    return {
      img: "logo.png"
    };
  }
};
</script>
0
sina