illustrate
Originally, in the vue2 era, we could use require to import static resources, as shown below
<template>
<div>
<div> test页面 </div>
</div>
</template>
<script>
export default {
name: "globe",
data() {
return {
globe: {
baseTexture: require('@/assets/echarts/earth.jpg'),
environment: require('@/assets/echarts/starfield.jpg'),
}
},
methods: {
},
}
</script>
However, vite in vue3 does not use the require method definition. To put it bluntly, it does not use the require method to import resources, but uses a new method. Please see the official website for details.
Vite official website
I provide two methods here:
Method 1:
Use import to import resources
<template>
<div>
<div> test页面 </div>
</div>
</template>
<script setup>
import img_echarts from '@/assets/echarts/earth.jpg'
import img_bg from '@/assets/echarts/starfield.jpg'
const globe = {
baseTexture: img_echarts ,
environment: img_bg ,
}
}
</script>
Method 2:
Directly use new URL(url, import.meta.url) syntax
<template>
<div>
<div> test页面 </div>
</div>
</template>
<script setup>
const globe = {
baseTexture: new URL('@/assets/echarts/earth.jpg', import.meta.url).href ,
environment: new URL('@/assets/echarts/starfield.jpg', import.meta.url).href ,
}
}
</script>
END
PS: Come on, bury the pit! Go home.