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>
相关推荐
海底火旺16 分钟前
JavaScript中的Object方法完全指南:从基础到高级应用
前端·javascript·面试
海底火旺16 分钟前
JavaScript中的Symbol:解锁对象属性的新维度
前端·javascript·面试
天天扭码17 分钟前
一文吃透 ES6新特性——解构语法
前端·javascript·面试
Kagerou18 分钟前
组件测试
前端
JustHappy20 分钟前
啥是Hooks?为啥要用Hooks?Hooks该怎么用?像是Vue中的什么?React Hooks的使用姿势(上)
前端·vue.js·react.js
张可34 分钟前
历时两年半开发,Fread 项目现在决定开源,基于 Kotlin Multiplatform 和 Compose Multiplatform 实现
android·前端·kotlin
培根芝士42 分钟前
electron-updater实现自动更新
javascript·electron
嘻嘻嘻嘻嘻嘻ys1 小时前
《Spring Boot 3 + GraalVM原生镜像实战:云原生时代的毫秒启动与性能调优》
前端·后端
嘻嘻嘻嘻嘻嘻ys1 小时前
《Spring Boot 3.0×GraalVM:云原生时代的毫秒级启动实战革命》
前端·后端
嘻嘻嘻嘻嘻嘻ys1 小时前
《Vue 3.4响应式内核优化与WebAssembly性能突破实战指南》
前端·后端