Vue.js 如何使用道具动态绑定img

我试图使用道具动态绑定img，但由于路径原因，图像无法显示

我尝试使用require，但无法使用，即

require（“~@/assets/logo.png”）

我做得对吗

{{title}}

图像未显示。

检查这是否有帮助-

在您的组件中：

const logo = require('~@/assets/logo.png');

在html中：

<part :picture="logo" title="Service"/>

---

您可以像这样导入所有图像：

// correct your folder directory if I did it wrong 
const images = require.context('@/assets/', false, /\.jpg|\.png$/)

然后在方法中添加loadImg：

methods: {
  loadImg (path) {
    return images('./' + path)
  }
}

然后在模板中：

- <part picture="require('~@/assets/logo.png')" title="Pencard"/>
+ <part :picture="loadImg('logo.png')" title="Pencard"/>

-
+ 

不需要三次相同的文件。导入一次，然后在需要的地方使用它。我尝试了从'@/assets/logo.png'导入图像，并返回模板中的{pic:Image，}，对吗？它不起作用了。谢谢，它起作用了。唯一需要的更改是我必须删除require中的“~@”，并将徽标作为属性。正在正确加载。当我在上面添加其他图像时，即第二个图像不显示。减号（-）显示要删除的行，加号（+）显示应该替换的行。抱歉，我的意思是我尝试了此操作，但图像不显示。因此第一个图像有效，第二个图像无效？是的。第一个正在工作，第二个图像未显示。