使用动态图片 src 作为 prop Vue

问题描述

我正在尝试将动态 src 作为 prop 发送到 imageComponent，但我做错了。 fileName = about.gsx$imagesrc.$t 不起作用。图像存储在资产/图片中，about.gsx$imagesrc.$t 与图像名称的值相同。

<template>
  <div class="timeline">
    <div class="timeline-content" v-for="about in state.aboutData" :key="about.index">
      
        <div class="fill-circle">
          <h2 class="timeline-year" > {{about.gsx$year.$t}}</h2>
        </div>
      <p class="timeline-text" > {{about.gsx$happening.$t}} </p>

        <ImageComponent
          //Filename is the problem
          fileName= about.gsx$imagesrc.$t
          leftPosition="200px"
          activeColor="#132766"
        />
     
    </div>
  </div>
</template>

<script>
import { state } from '@/store/index.js'
import ImageComponent from "@/components/UI-kit/PictureModules/Sko.vue"

export default {
  name:"Timeline",components: {ImageComponent},}

图像组件

<template>
    <div class="ImageComponent" v-bind:style="{ left: leftPosition}">
        <img class="image" :src="require(`@/assets/Pictures/${fileName}`)">
        <div class="shadow" v-bind:style="{ backgroundColor: activeColor}"></div>
    </div>
</template>

<script>
export default {
    name:"ImageComponent",props: {
        activeColor: [String],leftPosition: [String],fileName: [String],}
}
</script>

这是我得到的错误

渲染错误：“错误：找不到模块'./about.gsx$imagesrc.$t'”

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）