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

 配景介绍

1. <script setup>
2. const teachers = [
3.   {
4.     name: '马云 Jack Ma',
5.     company: '阿里巴巴 alibaba.com',
6.     description: '马云，男，汉族，中共党员，1964年9月10日生于浙江省杭州市，祖籍浙江省嵊州市谷来镇。',
7.     imageUrl: '@/assets/teacher/1.jpg'
8.   },
9.   {
10.     name: '马化腾 Pony',
11.     company: '腾讯 tencent.com',
12.     description: '马化腾，汉族，1971年10月29日生于广东省东方县八所港，广东省汕头市潮南区人。',
13.     imageUrl: '@/assets/teacher/2.jpg'
14.   },
15.   {
16.     name: '刘强东 Richard Liu',
17.     company: '京东 jd.com',
18.     description: '刘强东，男，汉族，1973年3月10日生（另一说法：1974年2月14日），江苏宿迁人，祖籍湖南湘潭。',
19.     imageUrl: '@/assets/teacher/3.jpg'
20.   }
21. ];
22. </script>
24. <template>
25.    <div class="body">
26.     <div class="card" v-for="(teacher, index) in teachers" :key="index">
27.       <div class="photo">
28.         <img :src="teacher.imageUrl" alt="Teacher Photo">
29.       </div>
30.       <h1>{
31.   
32.   { teacher.name }}</h1>
33.       <h2>{
34.   
35.   { teacher.company }}</h2>
36.       <p>{
37.   
38.   { teacher.description }}</p>
39.       <a href="#">了解更多</a>
40.     </div>
41.   </div>
43. </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 可以确保路径始终正确，纵然资源路径发生变化。
正确写法

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

复制代码

图片正常显示 

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。