Javascript 将映像名称传递给vue组件时未找到映像

我正在尝试动态创建输入组件，因为我需要为每个输入创建一个特定的图标。 图标被设置为作为背景图像的输入，当我直接在css中使用它时，它会工作，比如so

background image:url（../../assets/icons/email.svg）

但是当我传递组件图标的名称时，应用程序说找不到它！


{{title}}
导出默认值{
道具：[“标题”，“bgImg”]，
计算：{
imgIcon（）{
返回“背景图像：url（./assets/icons/'+this.bgImg+'）”；
}
}
}

当我把名字作为字符串传递时



错误已解决，但没有显示任何内容

到底出了什么问题？
如果要使用模板中的图像，需要使用
@
，并且
url
应该是字符串

export default {
  props: ["title", "bgImg"],
  computed: {
    imgIcon() {
      return `background-image: url('@/assets/icons/${this.bgImg}')`;
    }
  }
}

绑定到动态图像时使用
require
：

计算：{
imgIcon（）{
试一试{
返回'backgroundimage:url（'+require（'@/assets/icons/'+this.bgImg）+'）；
}捕获（错误）{
返回“”；
}
}
}

您在注释中提到的错误是因为路径的一部分是在首次计算时可能尚未定义的道具，因此它被包装在
try
块中。
您不应该将相对路径与vue一起使用。请尝试改用
@
别名。它是根目录的别名。@Nicolas我尝试了这个
return'background image:url（@/assets/icons/'+this.bgImg+'.svg）但它不起作用，我认为url也需要加引号：<代码>返回“背景图像：url（\'@/assets/icons/'+this.bgImg+'.svg\'）”
也不起作用。仍然说找不到文件：/这起作用了！但是当使用
@
时会出现错误，因此我需要使用点来定位文件夹。导致此问题的原因是什么？此错误
无法解决“@/assets/icons”
。这个路径等于
。/../assets/icons
啊，好的，我更新了答案
@
是
src
目录的别名，还有一个问题。当我尝试在不传递图像名称的情况下使用组件时。整个组件都消失了，我在render中遇到了这个错误：“错误：找不到模块“/”

。有时我可能不需要使用背景图像。除了更改组件的其他用途的样式之外，还有什么解决方案吗？好的。您上次对答案的编辑也解决了我的问题。谢谢您的帮助^^