Vue 中的绑定图像源不显示图像 [英] Bound image source in Vue not displaying image

问题描述

我有一个 Vue 组件，它将对象作为主应用程序的道具.

我想访问该对象中包含图像源网址的属性.

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

如果我手动将 url 放入图像 src '../assets/image.png'，图像显示没有问题.但我希望它是动态的.

.name 显示正常，但 .image 没有图像，即使路径正确.

解决方案

这是人们使用 Vue 的常见问题.问题是 webpack 没有正确格式化绑定对象，因为 v-bind 中的表达式在运行时执行，webpack 别名在编译时执行，为此您可以使用 webpacks require() 函数

方法:{getImgUrl(imgName) {return require('../assets/'+imgName)}},数据 () {返回 {目的: {图像:'图像.png'}}}

在模板中，你可以得到图片src为

<img :src="getImgUrl(object.image)" :alt="object.image">

I have a Vue component which is taking an object as a prop from the main App.

I want to access a property in that object which contains the url to the image source.

The url changes correctly. If, for example, the object's 'image' property is '../assets/image.png' then the src="" will point to the correct path but nothing will show.

If I put the url in the image src manually '../assets/image.png', the image displays no problem. But I want it to be dynamic.

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

.name displays fine, but .image comes up with no image, even if the path is correct.

解决方案

It is a common issue that people use Vue. The problem is that webpack does not correctly format the binded object because expression in v-bind is executed at runtime, webpack aliases at compile time, to do that you can use webpacks require() function

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

In the template, you can get the image src as

<div>
    <img :src="getImgUrl(object.image)" :alt="object.image">
</div>

这篇关于Vue 中的绑定图像源不显示图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！