Vue.js рендеринг v-bind: стиль фона фонового изображения с пользовательским вычисляемым свойством не работает - PullRequest
Новая
       22

Vue.js рендеринг v-bind: стиль фона фонового изображения с пользовательским вычисляемым свойством не работает

0 голосов
/ 09 октября 2018

// Component.vue с вычисляемым свойством - Не работает 

<template>
<section class="background" v-bind:style="{
    'background-image': 'url(' + require(imageUrl) + ')'}"> . 
</section>
</template>

<script>
export default {
   computed: {
     imageUrl() {
         return './path/to/image';
     }
   }
}
</script>

// Component.vue - Прямой подход работает 

<template>
<section class="background" v-bind:style="{
    'background-image': 'url(' + require('./path/to/image.jpg') + ')'}"> . 
</section>
</template>

Причина прежней реализации заключается в том, что мне нужно вычисляемое свойство, которое может генерироваться случайным образом при каждой перезагрузке.

Вотполное сообщение об ошибке для вычисляемого свойства case 

[Vue warn]: Error in render: "Error: Cannot find module '../assets/media/images/1.jpg'"

found in

---> <Background>
       <App> at src/App.vue
         <Root>
warn @ vue.runtime.esm.js?2b0e:587
logError @ vue.runtime.esm.js?2b0e:1733
globalHandleError @ vue.runtime.esm.js?2b0e:1728
<stack trace> // I can not post the full message since it is not allowable by the policy of stackoverflow

1 Ответ

0 голосов
/ 09 октября 2018

Пожалуйста, измените код, как показано ниже. 

   computed: {
     imageUrl() {
         return require('./path/to/image');
     }
   }

извините, я не знаком с этим поведением, но, насколько я искал, ваша проблема может быть связана с тем, что говорит следующая страница Vue Loader.

Обработка URL-адресов активов |Vue Loader

...