vue3 使用import使用动态图片

在 Vue3 中，可以使用 `import` 语句引入动态图片。具体步骤如下：

1. 在 `src` 目录下创建一个 `assets` 目录，用于存放图片文件。

2. 在需要使用图片的组件中，使用 `import` 语句引入图片。例如：

import myImage from '@/assets/my-image.png'

3. 在组件中，使用 `img` 标签显示图片。例如：

<template>
  <div>
    <img :src="myImage" alt="My Image">
  </div>
</template>

<script>
export default {
  data() {
    return {
      myImage: myImage
    }
  }
}
</script>

在上面的代码中，通过 `:src` 绑定了 `myImage` 变量，该变量指向了引入的图片。这样，就可以在页面中显示动态图片了。

相关问题

vue3 使用图片懒加载

在 Vue 3 中，你可以使用 Vue 提供的 `v-lazy` 指令来实现图片懒加载。以下是一个简单的示例：

1. 安装 `vue-lazyload` 包。

   npm install vue-lazyload

2. 在 `main.js` 中引入并使用 `VueLazyload`。

   import Vue from 'vue'
   import VueLazyload from 'vue-lazyload'

   Vue.use(VueLazyload, {
     loading: '/loading.gif', // 预加载图片
     error: '/error.png' // 加载失败图片
   })

3. 在模板中使用 `v-lazy` 指令。

   <img v-lazy="imageSrc" alt="图片">

`imageSrc` 是图片的地址，当图片进入可视区域时，`v-lazy` 会自动加载图片。

注意：`v-lazy` 只能用于 `img` 标签，不能用于背景图片等其他元素。

vue3+vite4 如何动态使用本地图片

在Vue3中，可以使用`require()`函数动态引入本地图片：

<template>
  <div>
    <img :src="image1" alt="">
    <img :src="image2" alt="">
  </div>
</template>

<script>
export default {
  data() {
    return {
      image1: null,
      image2: null
    }
  },
  mounted() {
    // 引入本地图片
    this.image1 = require('@/assets/image1.jpg')
    this.image2 = require('@/assets/image2.jpg')
  }
}
</script>

在上面的例子中，我们通过`require()`函数动态引入了两张本地图片，并将其赋值给了`image1`和`image2`变量。在模板中，我们使用`<img>`标签来显示这些图片，属性`src`的值绑定到对应的变量即可。

需要注意的是，`require()`函数只能在模块的顶层作用域中使用。如果需要在函数或条件语句中引入图片，可以使用`import()`函数动态加载模块，再使用`default`属性获取模块的默认导出。

<template>
  <div>
    <img :src="image" alt="">
  </div>
</template>

<script>
export default {
  data() {
    return {
      image: null
    }
  },
  mounted() {
    // 动态引入本地图片
    import('@/assets/image.jpg').then(module => {
      this.image = module.default
    })
  }
}
</script>

在上面的例子中，我们使用`import()`函数动态引入了一张本地图片，并将其赋值给了`image`变量。需要注意的是，`import()`函数返回一个Promise，需要通过`.then()`方法获取模块的默认导出。