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 加载本地静态图片

如果你的本地静态图片已经放置在 public 目录下，你可以直接使用相对路径来加载这些图片。例如：

<template>
  <div>
    <img src="./assets/images/my-image.png" alt="本地静态图片">
  </div>
</template>

在上面的代码中，我们使用相对路径 `./assets/images/my-image.png` 来加载 `public` 目录下的本地静态图片。这样就可以加载指定的本地静态图片了。

注意：在使用相对路径加载本地静态图片时，路径是相对于 HTML 文件的。如果你需要在 Vue 组件中加载本地静态图片，请使用相对于组件文件的路径。

Vue 预加载本地图片

Vue 可以使用 `require()` 方法来预加载本地图片。你可以在组件的 `created` 钩子函数中使用这个方法来加载图片。

例如，如果你有一张名为 `example.jpg` 的图片，可以像这样在组件中预加载它：

created() {
  const exampleImg = require('@/assets/example.jpg')
}

注意，`@` 符号代表了项目根目录。如果你的图片存储在其他文件夹下，需要相应地修改路径。

接着，你可以将预加载的图片作为一个数据属性添加到组件中，供模板中使用：

data() {
  return {
    exampleImage: null
  }
},
created() {
  this.exampleImage = require('@/assets/example.jpg')
}

最后，在模板中使用预加载的图片：

<template>
  <div>
    <img :src="exampleImage" alt="Example Image">
  </div>
</template>