Nuxt3动态资源导入：SSR首次加载图片不显示问题排查

我正在使用Nuxt v3.0.0-rc.12，开发了一个通过image prop接收图片路径的组件，代码如下：

<template>
  <img alt="" :src="resolvedImage">
</template>

<script setup>
import { computed } from 'vue'

const props = defineProps({
  image: {
    default: '',
    type: String
  }
})

const resolvedImage = computed(() => {
  return props.image ? new URL(props.image, import.meta.url).href : ''
})
</script>

使用组件的方式如下：

<my-component image="../assets/somefolder/filename.png" />

根据Vite文档，使用new URL(url, import.meta.url)是正确的动态资源处理方式，该方式在客户端正常工作，但在SSR首次加载时图片不显示且出现警告，请问哪里操作有误？

问题原因 #

SSR环境下，import.meta.url的运行上下文和客户端存在差异，服务器端无法正确解析相对路径对应的本地文件资源，导致new URL()生成的路径在服务端渲染阶段无效，最终引发图片加载失败和警告。

解决方法 #

方法一：使用Nuxt内置的useAsset（推荐）

Nuxt 3提供了useAsset方法，能自动适配SSR和客户端环境，正确解析静态资源路径：

<template>
  <img alt="" :src="resolvedImage">
</template>

<script setup>
import { computed } from 'vue'
import { useAsset } from '#imports'

const props = defineProps({
  image: {
    default: '',
    type: String
  }
})

const resolvedImage = computed(() => {
  return props.image ? useAsset(props.image) : ''
})
</script>

方法二：区分环境处理

通过process.client判断当前运行环境，服务端返回空或占位图，客户端再用new URL()解析：

<template>
  <img alt="" :src="resolvedImage">
</template>

<script setup>
import { computed } from 'vue'

const props = defineProps({
  image: {
    default: '',
    type: String
  }
})

const resolvedImage = computed(() => {
  if (!props.image) return ''
  return process.client ? new URL(props.image, import.meta.url).href : ''
})
</script>

方法三：使用public目录存放图片

将图片放到项目根目录的public文件夹下，使用绝对路径传递给组件，SSR和客户端都能直接识别：
比如图片路径为public/assets/somefolder/filename.png，使用组件时：

<my-component image="/assets/somefolder/filename.png" />

组件代码可简化为：

<template>
  <img alt="" :src="image">
</template>

<script setup>
const props = defineProps({
  image: {
    default: '',
    type: String
  }
})
</script>

内容的提问来源于stack exchange，提问作者Caio Tarifa