问题:动态的图片资源访问404notfound
下面的代码在部署后通过动态的url是无法访问静态资源的
<template>
<img :src="imageUrl" />
</template>
<script lang="ts" setup>
const imageUrl = "src/assets/image.url"
</script>
可以直接通过将需要通过动态url直接访问路径的图片,放到public/assets中,用于访问,代码的路径可以直接改为/assets/路径下即可
<template>
<img :src="imageUrl" />
</template>
<script lang="ts" setup>
const imageUrl = "/assets/image.url"
</script>
如果不想放在public 目录下, 可以直接通过import 的方式导入
<template>
<img :src="imageUrl" />
</template>
<script lang="ts" setup>
import imageUrl from '@/assets/image.url'
</script>
css中背景图片访问,可以直接通过相对路径访问
<template>
<div class="bg"> 123123</div>
</template>
<style scoped>
.bg {
background-image: url(../../assets/image.url)
}
</style >