Vue动态图片渲染失效：如何为src属性动态传入图片链接？

嘿，我之前也踩过一模一样的坑！其实问题根源很简单：你直接把@/assets/xxx这种路径以字符串形式传给子组件时，Vue并不会自动解析这个@别名——它就只是个普通字符串，浏览器根本找不到对应的资源~

咱们一步步来解决：

为什么硬编码能正常工作？ #

当你在子组件模板里直接写:src="@/assets/images/artist1.jpeg"时，Vue的模板编译器会自动识别这个路径，配合Webpack/Vite的资源处理机制，把它转换成浏览器能识别的真实URL。但你把它放进prop的对象里当字符串传，就跳过了这个编译解析的步骤，自然加载失败啦。

解决方案1：父组件用require处理路径（Webpack项目适用） #

直接在传参的时候用require()包裹路径，让Webpack提前处理这个资源：

<template>
  <div>
    <artist-card :artist="{name: 'Alex Waves', pictureUrl: require('@/assets/images/artist1.jpeg')}" />
  </div>
</template>

解决方案2：父组件提前导入图片（通用所有Vue项目） #

如果你的图片是固定的，或者可以提前知道路径，直接在父组件里import进来再传，这种方式最稳妥：

<template>
  <div>
    <artist-card :artist="{name: 'Alex Waves', pictureUrl: artistImage}" />
  </div>
</template>
<script setup>
import ArtistCard from "@/components/ArtistCard.vue"
// 先导入图片资源
import artistImage from "@/assets/images/artist1.jpeg"
</script>

解决方案3：子组件统一处理路径（适合动态路径较多的场景） #

如果你需要传很多不同的本地图片路径，不想在父组件一个个处理，可以在子组件里写个工具函数来解析路径：

• 若是Vite项目：

<template>
  <div>
    <img :src="getImageUrl(artist.pictureUrl)" alt="artist-picture" />
  </div>
</template>

<script setup>
const { artist } = defineProps(["artist"]);

const getImageUrl = (url) => {
  // 判断是不是本地@开头的路径
  if (url.startsWith('@/')) {
    // 替换@为相对路径，用import.meta.url生成正确URL
    return new URL(url.replace('@/', './'), import.meta.url).href;
  }
  // 如果是远程图片URL，直接返回
  return url;
}
</script>

• 若是Webpack项目：

<template>
  <div>
    <img :src="getImageUrl(artist.pictureUrl)" alt="artist-picture" />
  </div>
</template>

<script setup>
const { artist } = defineProps(["artist"]);

const getImageUrl = (url) => {
  if (url.startsWith('@/')) {
    return require(url);
  }
  return url;
}
</script>

选一个适合你项目的方式试试，应该就能解决问题啦！

备注：内容来源于stack exchange，提问作者youssefrag