Question

我有一个Vue组件，它将主App中的对象作为道具。

我想访问该对象中的属性，该属性包含图像源的URL。

URL正确更改。例如，如果对象的“图像”属性为“ ../assets/image.png”，则src =“”将指向正确的路径，但不会显示任何内容。

如果我将url手动输入图像src'../assets/image.png'，则图像不会显示任何问题。但是我希望它是动态的。

<img :src="object.image" :alt='object.name'>

.name显示正常，但是即使路径正确，.image也不会显示任何图像。

Answer 1

您需要使用require来使Webpack正确解析您的路径

<img :src="getImage(object.image)" :alt='object.name'>

methods: {
  getImage(path) {
    return require(path)
  }
}

Answer 2

人们使用Vue是一个常见问题。问题是webpack无法正确格式化绑定的对象，因为v-bind中的表达式是在运行时执行的，而webpack的别名是在编译时执行的，为此您可以使用webpacks的 require（）函数

python -c 'import ansible.playbook.task as T ; print T.Task()._valid_attrs.keys();'

在模板中，您可以将图像src获取为

methods: {
   getImgUrl(imgName) {
    return require('../assets/'+imgName)
   }
},
data () {
    return {
       object: {
          image: 'image.png'
       }
    }
}

Vue中的绑定图像源不显示图像

2 个答案: