vue3中图片引入

说明:vue2项目一般使用vuecli,支持require进行导入,而在vue3中使用了vite不支持使用require进行引入

vue2中图片引入

bash 复制代码
<template>
  <div>
    <div> 测试 </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
          img: require('@/assets/xxxxx.jpg'),
    }
  },
  methods: {
  },
}
</script>

vue3中图片引入

方法一:使用 import导入资源

bash 复制代码
<script setup>
import { ref } from "vue";
import source from "@/assets/xxxx.jpg";
const Img = ref("");
Img.value = source;
</script>

方法二:使用new URL(url, import.meta.url)

bash 复制代码
<script setup>
import { ref } from "vue";
const Img = ref("");
Img.value = new URL(
  "@/assets/xxxx.jpg",
  import.meta.url
).href;
</script>
相关推荐
用户1512905452202 分钟前
itoa函数
前端
xiaominlaopodaren4 分钟前
“UI里就可以请求数据库”,让你陌生的 React 特性
前端·javascript·react.js
薛定谔的算法5 分钟前
JavaScript数组操作完全指南:从基础到高级
前端·javascript·算法
拜无忧6 分钟前
前端,用SVG 模仿毛笔写字绘画,defs,filter
前端·css·svg
怪可爱的地球人7 分钟前
ts的迭代器和生成器
前端
FlowGram9 分钟前
Flowgram 物料库建设思考与实践
前端
用户221520442780011 分钟前
Promise实例方法和async、await语法糖
前端·javascript
普通码农11 分钟前
uniapp开发微信小程序使用takeSnapshot截图保存分享
前端
snows_l34 分钟前
MacOS 通过Homebrew 安装nvm
前端·macos
前端开发爱好者34 分钟前
下一代全栈框架:Deno + Vite 的结合体!
前端·javascript·后端