Vue.js基于Props生成动态图片路径的问题求助

问题原因 #

直接通过字符串拼接路径（比如/src/assets/images/${product}/cardImg.svg）无法被Webpack正确解析，因为Webpack会对src目录下的资源进行打包处理（添加哈希重命名、优化等），静态字符串拼接的路径无法被Webpack识别为需要处理的资源，导致最终路径无效。

解决方案 #

使用require()动态导入资源，让Webpack能够静态分析资源路径的固定前缀，从而正确打包对应的图片文件。可以通过计算属性来生成动态路径。

修改后的完整代码 #

<script>
export default {
  name: 'card',
  props: {
    product: String,
    text: String,
  },
  computed: {
    logoPath() {
      // 处理动态Logo路径，添加错误捕获避免不存在的product导致报错
      try {
        return require(`@/assets/images/${this.product}/${this.product}Logo.svg`);
      } catch (e) {
        // 可选：返回默认图片
        return require('@/assets/images/default-logo.svg');
      }
    },
    cardBgPath() {
      try {
        return require(`@/assets/images/${this.product}/cardImg.svg`);
      } catch (e) {
        return require('@/assets/images/default-card-bg.svg');
      }
    }
  },
  methods:{
    redirect(){
      this.$router.push(this.product)
    }
  }
}
</script>

<template>
    <div @click="redirect()" class="card" :style="`background-image: url(${cardBgPath})`">
        <div class="card-text d-flex flex-column gap-3">
          <div class="d-flex align-items-center justify-content-between">
            <img :src="logoPath" alt="Logo">
            <i class="bi bi-arrow-right"></i>
          </div>
          <p>{{text}}</p>
        </div>
    </div>
</template>

<style scoped>
 .card{
   max-width: 90%;
   width: 402px;
   height: 568px;
   background-size: cover;
   border-radius: 24px;
   padding: 2rem 1rem;
   background-repeat: no-repeat;
   position: relative; /* 修复card-text绝对定位的问题 */
 }
 .card:hover{
   scale: 105%;
 }
 img{
   filter: brightness(100);
   height: 40px;
 }
 .bi-arrow-right {
   color: #ffffff;
   scale: 200%;
 }
 p{
   color: #FFFFFF;
 }
 .card-text{
   position: absolute;
   bottom: 0;
   width: calc(100% - 2rem); /* 适配padding，避免超出容器 */
   padding-bottom: 2rem;
 }
</style>

关键说明 #

1. require()的使用规则：路径必须包含固定前缀（比如@/assets/images/），不能全为变量，否则Webpack无法预编译对应的资源文件。
2. 错误处理：添加try-catch可以避免当product值对应的图片不存在时，组件抛出错误导致崩溃，同时可以返回默认图片提升用户体验。
3. 额外样式修复：原代码中.card缺少position: relative，导致.card-text的绝对定位会相对于父级非静态元素，这里补充后更符合预期；同时调整.card-text的宽度为calc(100% - 2rem)适配容器的padding，避免内容超出。

为什么之前的方法无效 #

• 直接变量拼接路径：Webpack无法静态识别该路径对应的资源，不会对其进行打包处理，最终浏览器请求的是原始字符串路径，找不到资源。
• CSS变量设置路径：Webpack同样无法处理CSS变量中的动态资源路径，CSS中的url()只会解析静态字符串，动态变量无法触发资源打包。
• public文件夹方案：public下的资源不会经过Webpack打包，直接以原始路径访问，所以可行，但无法适配依赖Webpack资源处理的优化插件。

内容的提问来源于stack exchange，提问作者Yan Capistrano Lopes