要在 vue 中显示带有 img 标签的图像，可以使用 v-bind:src 指令或 :src 简称。请记住 :src 需要一个 JavaScript 表达式，因此如果您想在 :src 中使用字符串文字，您需要将字符串括在引号中。

const app = new Vue({
  data: function() {
    return {
      link: '../../assets/logo.png'
    };
  },
  template: `
    <div>
      <div style="width: 50%">
        <img :src="'../../assets/logo.png'" />
      </div>
      <div style="width: 50%">
        <img :src="link" />
      </div>
  </div>
  `,
});

Computed Src

您还可以将计算属性传递给 :src。只要确保 computed 的属性返回，如下段代码所示：

const example =new Vue({
  template: `
    <div style="width: 50%">
      <img :src="photo" />
    </div>
  `,
  computed: {
    photo() {
return '../../assets/logo.png';
    }
  }
});

Class src

您可以使用 v-bind:class 或简称 :class 在图像上设置 Css 的 Class 样式。

const decor = new Vue({
  data: () => ({
    active: false
  }),
  template: `
    <div style="width: 50%">
      <img :class="imageClass" :src="photo" />
    </div>
  `,
  computed: {
    photo() {
      return '../../assets/logo.png';
    },
    imageClass() {
      return { active: this.active };
    }
  },
  mounted() {
    this.active = true;
  }
});

译文原文：https://masteringjs.io/tutorials/vue/img-tag 非直翻，如有问题，请指正

注：本文属于原创文章，版权属于「前端达人」公众号及 qianduandaren.com 所有，未经授权，谢绝一切形式的转载