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>
相关推荐
三门7 分钟前
vue官网新读之后收获记录
前端
Keepreal49614 分钟前
使用Canvas绘制转盘
javascript·vue.js·canvas
mapbar_front20 分钟前
我们需要前端架构师这个职位吗?
前端
ScriptBIN28 分钟前
Javaweb--Vue
前端·vue.js
KenXu33 分钟前
React Conf 2025 - 核心更新
前端
前端Hardy37 分钟前
Vue 高效开发技巧合集:10 个实用技巧让代码简洁 50%+,面试直接加分!
前端·javascript·vue.js
ᖰ・◡・ᖳ1 小时前
JavaScript:神奇的ES6之旅
前端·javascript·学习·es6
app出海创收老李1 小时前
海外独立创收日记(5)-上个月收入回顾与本月计划
前端·后端·程序员
前端Hardy1 小时前
HTML&CSS:一眼心动的 SVG 时钟
前端·javascript·css
TTGGGFF1 小时前
Streamlit:CSS——从基础到实战美化应用
前端·css