Vue入门必看：轻松添加图片，让你的界面更生动

引言

准备工作

在开始之前，请确保你已经安装了Vue.js。你可以通过以下命令进行安装：

npm install vue

或者如果你使用的是Vue CLI：

vue create my-project

从本地路径添加图片

<template>
  <div>
    <img src="./path/to/image.jpg" alt="示例图片">
  </div>
</template>

从远程URL添加图片

<template>
  <div>
    <img src="https://example.com/path/to/image.jpg" alt="远程图片">
  </div>
</template>

动态生成图片路径

<template>
  <div>
    <img :src="imagePath" alt="动态图片">
  </div>
</template>

<script>
export default {
  data() {
    return {
      imagePath: ''
    };
  },
  mounted() {
    this.imagePath = this.getImagePath();
  },
  methods: {
    getImagePath() {
      // 根据某些条件动态生成图片路径
      return 'path/to/image.jpg';
    }
  }
};
</script>

图片加载失败的处理

<template>
  <div>
    <img :src="imagePath" alt="图片加载中" onerror="this.onerror=null; this.src='path/to/default-image.jpg'">
  </div>
</template>

总结