Nuxt中使用@error处理图片加载失败时提示assets资源找不到如何解决？

你遇到的路径报错是构建工具的别名解析时机导致的：
~ 是webpack/Vite等构建工具约定的路径别名，只有写在模板静态属性（比如直接写src="~/assets/images/error.jpeg"）里的时候，才会在项目构建阶段被识别，替换为最终的资源打包路径。而你写在@error事件里的路径是运行时在浏览器中执行的赋值逻辑，浏览器本身不认识~这个别名，自然无法找到对应资源。

这里提供两种通用的可行方案：

• 方案1：提前引入默认图片（推荐，适配所有构建工具）
  先在组件script中引入资源，拿到构建后的真实路径再暴露给模板使用：

  // Vue3 写法示例
  <script setup>
  import errorImg from '~/assets/images/error.jpeg'
  // 其他业务逻辑...
  </script>
  

  模板中修改@error逻辑为：

  <img
    :src="cardImage"
    alt=""
    @error="$event.target.src = errorImg"
  />
  

• 方案2：将默认图片放入public目录
  把error.jpeg放到项目根目录的public/images文件夹下，public目录下的资源不会被构建工具处理，会直接暴露在服务根路径下，直接写绝对路径即可访问：

  <img
    :src="cardImage"
    alt=""
    @error="$event.target.src = '/images/error.jpeg'"
  />
  

如果你使用的是webpack项目，也可以直接在@error中使用require解析路径：

<img
  :src="cardImage"
  alt=""
  @error="$event.target.src = require('~/assets/images/error.jpeg')"
/>

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