vue img 加载图片

在 Vue.js 中，你可以使用 `v-bind` 指令来绑定动态图片的 URL，然后在 `img` 标签中使用绑定的 URL 来加载图片。例如：

<template>
  <div>
    <img v-bind:src="imageUrl" alt="动态图片">
  </div>
</template>

<script>
export default {
  data() {
    return {
      imageId: 1
    };
  },
  computed: {
    imageUrl() {
      return `http://example.com/images/${this.imageId}.png`;
    }
  }
};
</script>

在上面的代码中，我们使用 `v-bind:src` 指令来绑定 `imageUrl` 计算属性的值作为 `img` 标签的 `src` 属性。`imageUrl` 计算属性会根据 `imageId` 变量的值动态生成图片的 URL。这样就可以加载指定的动态图片了。

相关问题

vue img 加载本地图片

在 Vue.js 中，你可以使用 `require` 函数来加载本地图片。例如：

<template>
  <div>
    <img :src="imageUrl" alt="本地图片">
  </div>
</template>

<script>
export default {
  data() {
    return {
      imageName: 'my-image.png'
    };
  },
  computed: {
    imageUrl() {
      return require(`@/assets/images/${this.imageName}`);
    }
  }
};
</script>

在上面的代码中，我们使用 `require` 函数来加载 `@/assets/images` 目录下的本地图片。`imageUrl` 计算属性会根据 `imageName` 变量的值动态生成图片的路径。这样就可以加载指定的本地图片了。

注意：`require` 函数只能用于加载模块（例如图片、文本等），不能用于加载普通的 JavaScript 文件。另外，如果你的图片名称是由变量指定的，需要使用字符串模板语法来拼接完整路径。

vue img 静态加载图片

你可以使用 Vue.js 的 `v-bind` 指令来绑定静态图片的 URL，然后在 `img` 标签中使用绑定的 URL 来加载图片。例如：

<template>
  <div>
    <img v-bind:src="imageUrl" alt="静态图片">
  </div>
</template>

<script>
export default {
  data() {
    return {
      imageUrl: 'http://example.com/static/image.png'
    };
  }
};
</script>

在上面的代码中，我们使用 `v-bind:src` 指令来绑定 `imageUrl` 变量的值作为 `img` 标签的 `src` 属性。这样就可以加载指定的静态图片了。