vue3vite工程里面引入assets目录下的图片文件(一种方法)

51 篇文章 2 订阅
<template>
  <div>
    <p>轮播图</p>
    <van-swipe class="my-swipe" :autoplay="1500" indicator-color="white">
      <van-swipe-item> <img :src="tu1" alt="" /></van-swipe-item>
      <van-swipe-item> <img :src="tu1" alt="" /></van-swipe-item>
      <!-- <van-swipe-item> <img :src="tu2" alt="" /></van-swipe-item>不能使用 -->
    </van-swipe>
  </div>
</template>

<script>
import tu1 from "../../assets/home/001.png";
export default {
  data() {
    return {
      tu1,
      // tu2: require("@/assets/home/001.png"),不能使用
      // tu2: require("../../assets/home/001.png"),不能使用
    };
  },
};
</script>

<style>

</style>
Vue 3 本身并不直接提供自动引入 assets图片的功能,但可以通过一些工具和方法实现类似的效果。以下是几种在 Vue 3 项目中自动引入 assets 目录图片方法: 1. 使用 webpack 的 require.context 功能: webpack 提供了一个全局函数 `require.context`,它允许你创建自己的上下文,这样就可以在编译时动态引入一组文件。你可以创建一个自动引入图片的插件或者脚本,比如使用 `vite-plugin-imp` 插件或者通过配置 vite 的 rollup 插件来实现自动导入。 2. 使用 vite 插件: 如果你的项目使用的是 Vite 构建工具,可以通过编写一个 vite 插件来自定义构建行为,从而实现自动引入图片。例如,你可以创建一个插件来遍历 `assets/image` 目录,并将所有的图片文件导入到一个对象中,之后就可以在代码中以对象的键值对的方式直接使用这些图片。 3. 使用静态资源引用: 在 Vue 3 中,你可以使用 `<img>` 标签并通过 `src` 属性直接引用图片,如下所示: ```html <template> <img src="@/assets/images/your-image.png" alt="描述"> </template> <script setup> // ... </script> ``` 这里的 `@` 符号通常是在 vite 或 webpack 配置中设置的别名,指向项目的 `src` 目录。通过这种方式,你仍然需要手动在模板中引用每个图片,但它简化了路径的书写。 为了实现更自动化的导入,你可以结合使用上述方法,根据你的项目配置和需求来决定最佳实践。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值