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 分钟前
JS | 知识点总结 - 原型链
开发语言·javascript·原型模式
哆啦A梦15881 小时前
axios 的二次封装
前端·vue.js·node.js
阿珊和她的猫1 小时前
深入理解与手写发布订阅模式
开发语言·前端·javascript·vue.js·ecmascript·状态模式
yinuo1 小时前
一行 CSS 就能搞定!用 writing-mode 轻松实现文字竖排
前端
snow@li2 小时前
html5:拖放 / demo / 拖放事件(Drag Events)/ DataTransfer 对象方法
前端·html·拖放
爱看书的小沐2 小时前
【小沐杂货铺】基于Three.js渲染三维风力发电机(WebGL、vue、react、WindTurbine)
javascript·vue.js·webgl·three.js·opengl·风力发电机·windturbine
qq_398586542 小时前
Threejs入门学习笔记
javascript·笔记·学习
浪裡遊3 小时前
Nivo图表库全面指南:配置与用法详解
前端·javascript·react.js·node.js·php
課代表3 小时前
JavaScript 二维数组的三种定义与初始化方法
javascript·初始化·二维数组·多维数组·动态数组·循环遍历·数组合并
鸡吃丸子4 小时前
Next.js 入门指南
开发语言·javascript·next.js