У меня есть родительский компонент, который отправляет объект данных дочернему компоненту следующим образом:

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

Затем в моем дочернем компоненте я получаю эти данные объекта, выполнив:

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

Теперь по какой-то причине я могу без проблем использовать заголовок вроде этого {{ objectData.title }} и появляется.

Но когда дело доходит до URL-адреса внутри тега img, он не отображает изображение.

Я пытался сделать следующее:

<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-адрес исходил от родительского компонента.

Есть идеи, как это решить? Я добавил url-загрузчик в свой файл webpack:

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

Я также попытался вернуть objectData.url из функции computed / methods:

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

А потом используйте его как :src=“getImageUrl” или :src=“{{getImageUrl}}”, и мне тоже не повезло.

9
msqar 8 Дек 2018 в 15:53

2 ответа

Лучший ответ

Я столкнулся с той же проблемой и исправил ее с помощью функции 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
8
Boussadjra Brahim 8 Дек 2018 в 15:16

Две альтернативы:

  1. Статические ссылки, которые разрешает vue. Но они основаны на src и не работают с webpack / file-loader:
<img :src="'../assets/filename.png'"/>
  1. Работает с webpack. Обратите внимание на ".default" в конце:
<img :src="require('../assets/filename.png').default"/>

Соответствующая документация с ноября 2019 г .: https://github.com/vuejs/vue-loader/issues/1612

2
Amin Ariana 30 Июн 2020 в 20:32