使用vue3+vite创建的项目，动态引入本地图片，不能直接使用require

最新推荐文章于 2024-07-15 11:46:30 发布

心圣灵人

最新推荐文章于 2024-07-15 11:46:30 发布

阅读量1.1k

点赞数 2

分类专栏： vue3项目记录文章标签： vue.js uniapp

本文链接：https://blog.csdn.net/bao_Heng/article/details/134641738

版权

vue3项目记录专栏收录该内容

3 篇文章 0 订阅

订阅专栏

在Vue3结合Vite的项目中，由于Vite不支持require，因此无法直接使用require导入本地图片。为解决此问题，可以采用import动态导入图片，例如`import img from '@/assets/image.png'`，然后在模板中使用``。另一种方法是使用动态计算属性，如` 摘要由CSDN通过智能技术生成

vite中没有require，require是在webpack中使用的
可以使用import先导入图片，再使用
例如

import deviceImg from '@/static/images/device.png'

然后再组件里边images标签里边使用，例如
<image class="img" :src="deviceImg"></image>

或者是使用

new URL('静态路径', import.meta.url).href

例如
const deviceList = ref([
  {
    id: 'l002',
    tag: 'device',
    ico: new URL('@/static/images/device01.png', import.meta.url).href,
    name: '水泵0035、水泵0056',
    flow: '瞬时流量：10方/小时',
    share: '已分享5人',
    status: 'running',
    statusName: '运行中',
  },
  {
    id: 'l503',
    tag: 'project',
    ico: new URL('@/static/images/project.png', import.meta.url).href,
    name: '北京市智慧农业产业示范园',
    flow: '瞬时流量：13方/小时',
    share: '已分享2人',
    status: 'fault',
    statusName: '已故障',
  },
])

在组件中使用
![在这里插入图片描述](https://img-blog.csdnimg.cn/37f307ecbe6241e7a30c12358ea1f28e.png)
我这里是在uniapp中使用的，在vue项目中同理