这里的引用图片未生效而且报错
<template>
<img :src="imgurl" alt="" style="width: 60px; margin-right: 5px" />
</template>
<script>
export default {
setup() {
const state = reactive({
imgurl: "@/assets/images/restaurant5.png",
})
return {
...toRefs(state),
}
}
}
</script>
控制台报404
解决办法
<template>
<img :src="getAssetURL(`restaurant5.png`)" alt="" style="width: 60px; margin-right: 5px" />
</template>
<script>
export default {
setup() {
const state = reactive({
imgurl: "@/assets/images/restaurant5.png",
})
const getAssetURL = (image) => {
return new URL(`/src/assets/images/${image}`, import.meta.url).href;
};
return {
...toRefs(state),
getAssetURL
}
}
}
</script>