vite 大坑，行内样式 require is not defined

vite 里这样写用不了

<div :style="{backgroundImage: `url(${rquire('./assets/img/'+imgName)})`}">div>

需要用new URL(url, import.meta.url)

参考：
1 https://cn.vitejs.dev/guide/assets.html#new-url-url-import-meta-url
2 https://stackoverflow.com/questions/69696677/vite-vue-3-require-is-not-defined-when-using-image-source-as-props
3 https://www.zhihu.com/question/472668669

正确写法

<script setup>
const getImageUrl = (imgName) => {return new URL(`./assets/img/${imgName}`, import.meta.url).href
}
</script><template><div :style="{backgroundImage: `url(${getImageUrl('apple.png')})`}"></div>
</template>

另外，new URL里还用不了路径别名

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！