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

在 Vue3 + Vite4 中，可以使用 `import` 导入本地图片，然后将其传递给组件的 `setup` 函数。

以下是示例代码：

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

<script>
import myImage from '@/assets/my-image.png';

export default {
  setup() {
    const image = myImage;
    return { image };
  }
}
</script>

在上面的示例中，我们首先使用 `import` 导入本地图片 `my-image.png`，它位于 `src/assets` 目录中。然后，我们将该图片传递给组件的 `setup` 函数中的 `image` 变量，并将其返回作为一个响应式数据。

最后，在模板中，我们使用 `:src` 绑定 `image` 变量，以便将其作为图像的 `src` 属性值。

请注意，如果您使用的是相对路径，则需要在路径前面添加 `@` 符号来引用 `src` 目录。如果您使用的是绝对路径，则不需要添加 `@` 符号。

相关问题

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()`方法获取模块的默认导出。

vue3+vite动态路由使用参数会报错

可能是因为在 Vue3 + Vite 中，动态路由使用参数的方式有所不同。以前在 Vue2 + Vue-Router 中，我们可以使用 $route.params 来访问动态路由中的参数。但在 Vue3 + Vue-Router 4 中，$route.params 已经被移除了。相反，我们可以使用一个叫做 useRoute() 的新钩子来访问动态路由参数。

使用 useRoute() 钩子的示例代码如下：

import { useRoute } from 'vue-router'

export default {
  setup() {
    const route = useRoute()
    console.log(route.params) // 输出动态路由参数
  }
}

另外，如果你使用的是 Vue3 + Vue-Router 3.x，那么 $route.params 仍然是可用的。如果你还是遇到问题，可以贴出具体的报错信息，这样我可以更好地帮助你解决问题。