Question

我有一个父组件，该组件将数据对象发送到子组件，如下所示：

<child object-data=" url: 'url here', title: 'Title'"></child>

然后在我的子组件上，通过执行以下操作获取此对象数据：

<script>
    export default {
        props: [
            'objectData'
        ]
    }
</script>

现在，由于某种原因，我可以毫无问题地使用标题{{ objectData.title }}并显示出来。

但是，当涉及到img标签中的URL时，它并没有呈现图像。

我尝试执行以下操作：

<img :src="objectData.url"/> <---不呈现

<img v-bind:src="objectData.url"/> <---不呈现

<img v-bind:src="require(objectData.url)"/> <-引发警告错误，因为它不是路径，而是我猜到的对象。

<img v-bind:src="{objectData.url}"/> <---引发错误

<img v-bind:src="{{objectData.url}}"/> <---引发错误

当我检查dom元素时，它甚至不包含src属性。

如果我写下没有对象的URL，它将起作用。

<img v-bind:src="src/assets/images/icon.png"/>

但是我希望我的URL来自父组件。

关于如何解决此问题的任何想法？我在我的webpack文件中添加了url-loader：

            {
                test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
                loader: 'url-loader'
            }

我还尝试从计算/方法功能返回objectData.url：

computed: {
     getImageUrl: function() {
           return objectData.url;
     }
}

然后像:src=“getImageUrl”或:src=“{{getImageUrl}}”那样使用它，我也不是很幸运。

Answer 1

我遇到了同样的问题，并使用require函数进行了修复：

在父组件App.vue中：

<carousel-posts :posts="posts" />

export default {
 name: "app",
data() {
  return {
   posts: [
     {
      img: require("./assets/logo.png"),
      title: "Title 1",
      subTitle: "Sub Title 1",
      body:"lorem ipsum ..."
    }
    ...
    ]
    };
   }
  ...
 }

在子组件中，我遍历posts并按以下方式绑定图像src：

    <div class="card-body" v-for="(post,idx) in posts" >
      <img class="card-img" :src="post.img" />
         ...
     </div>

        <script>
           export default {
            props: ["posts"],
           ...

因此，在您的情况下，您应该具有以下内容：

     <child :object-data="objectData"></child>

        ...
     data(){ 
          return{
            dataObject:{
              url: require('./assets/someimg.png'), 
              title: 'Title'
             }
            }
          }

更新：

我的项目树：

   src
   |_assets
   |   |_logo.png
   |_components
   |   |_CarouselPosts.vue
   |_App.vue

Answer 2

两种选择：

静态链接。但是它们基于src，因此无法与webpack /文件加载器一起使用：

<img :src="'../assets/filename.png'"/>

与webpack一起使用。请注意最后的“ .default”：

<img :src="require('../assets/filename.png').default"/>

与2019年11月有关的文件： https://github.com/vuejs/vue-loader/issues/1612

vueJS组件上的图像未加载

2 个答案: