Vue3在img标签中绑定数据模型中的url图片无法显示问题

背景介绍

html 复制代码

<script setup>
const teachers = [
  {
    name: '马云 Jack Ma',
    company: '阿里巴巴 alibaba.com',
    description: '马云，男，汉族，中共党员，1964年9月10日生于浙江省杭州市，祖籍浙江省嵊州市谷来镇。',
    imageUrl: '@/assets/teacher/1.jpg'
  },
  {
    name: '马化腾 Pony',
    company: '腾讯 tencent.com',
    description: '马化腾，汉族，1971年10月29日生于广东省东方县八所港，广东省汕头市潮南区人。',
    imageUrl: '@/assets/teacher/2.jpg'
  },
  {
    name: '刘强东 Richard Liu',
    company: '京东 jd.com',
    description: '刘强东，男，汉族，1973年3月10日生（另一说法：1974年2月14日），江苏宿迁人，祖籍湖南湘潭。',
    imageUrl: '@/assets/teacher/3.jpg'
  }
];
</script>

<template>
   <div class="body">
    <div class="card" v-for="(teacher, index) in teachers" :key="index">
      <div class="photo">
        <img :src="teacher.imageUrl" alt="Teacher Photo">
      </div>
      <h1>{
  
  { teacher.name }}</h1>
      <h2>{
  
  { teacher.company }}</h2>
      <p>{
  
  { teacher.description }}</p>
      <a href="#">了解更多</a>
    </div>
  </div>

</template>

这是一个用于任务介绍的卡片效果，先用静态资源进行测试，但是图片无法显示，目前的效果如下：

图片无法正常显示，经查阅资料得知在现代前端开发中，特别是使用 Vue.js 或其他基于模块化的框架时，路径需要通过import或new URL()等方式解析，以确保在不同环境下的兼容性。

为什么imageUrl: '@/assets/teacher/1.jpg'图片不生效？

这种写法直接使用了相对路径或别名路径（@ 通常在 Vue 项目中是 src 目录的别名），但在某些情况下可能无法正确解析，原因如下：

(1) 静态资源的处理方式

在开发环境中，Webpack 或其他构建工具会处理静态资源文件。例如，@/assets/teacher/2.jpg 会被解析为 src/assets/teacher/2.jpg，但在生产环境中，这些资源文件可能会被重新打包和命名（例如，添加哈希值以避免缓存问题），导致路径发生变化。

(2) 模块解析问题

如果你在代码中直接使用 @/assets/teacher/2.jpg，Webpack 可能会将其视为模块路径，而不是静态资源路径。如果该路径没有正确配置为静态资源路径，Webpack 可能无法正确解析。

(3) 运行时路径问题

在某些运行时环境中，直接使用相对路径可能无法正确解析到资源文件，尤其是当页面路径较深或使用了动态路由时。

`imageUrl: new URL('@/assets/teacher/3.jpg', import.meta.url).href` 的优势

这种写法通过 new URL 和 import.meta.url 动态解析路径，确保路径的正确性：

(1) 动态解析路径

import.meta.url 提供了当前模块的完整 URL，new URL 可以基于这个 URL 和相对路径动态解析出正确的资源路径。这种方式可以避免路径解析错误，尤其是在动态路由或嵌套路由中。

(2) 兼容性

在某些情况下，直接使用相对路径可能会因浏览器或运行环境的差异而失败，而 new URL 的方式更加通用和可靠。

(3) 生产环境优化

在生产环境中，静态资源可能会被重新打包和命名，使用 new URL 可以确保路径始终正确，即使资源路径发生变化。

正确写法