VUEJS组件中的图像未加载

Question

我得到了一个父组件，将数据对象发送到这样的孩子组件：

＆lt; child object-data =“ url：url：url onere'，title：'title''＆gt;＆lt;＆lt;/child＆gt;

然后在我的孩子组件上，我通过执行：

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

现在，出于某种原因，我可以使用标题而没有任何问题{objectdata.title}}}并显示出来。

但是，当涉及IMG标签内的URL时，它不会呈现图像。

我尝试执行以下操作：

＆lt; img：src =“ objectdata.url”/＆gt;＆lt; ----不渲染

＆lt; img v-bind：src =“ objectdata.url “/＆gt;＆lt; ---不渲染

＆lt; img v-bind：src =“ require（objectdata.url）”/＆gt;＆lt; - 引发警告错误因为这不是一条路径，而是一个对象。

＆lt; img v-bind：src =“ {objectdata.url}”/＆gt;＆lt; -----抛出错误

＆lt; img v-bind：src ='{{objectdata 。

​

如果我在没有对象的情况下写下URL，则可以工作。

＆lt; img v-bind：src =“ src/assets/images/icon.png”/＆gt;，

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

关于如何解决这个问题的想法？我在WebPack文件上添加了URL-LOADER：

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

我还尝试从计算/方法fuction返回objectdata.url fuction：

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

然后将其像：src =“ getimageUrl”或：src =“ {{getimageurl}}”，我也不幸运。

Answer 1

我遇到了同一问题，并通过使用require函数修复了它：

在parent component 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 post 并绑定图像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

两种替代方法：

1. vue解决的静态链接。但是它们基于SRC，并且不使用WebPack / File-Loader：

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

2. 与WebPack一起使用。请注意结尾的“ .default”：

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

2019年11月的文档相关的文件：
https://github.com/vuejs/vuejs/vue-loader/loader/sissues/1612