Vue.js 使用自定义计算 属性 渲染 v-bind:style background-image url 不起作用

Question

// 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>

前一个实现的原因是我需要一个计算的属性，它可以在每次重新加载时随机生成。

这里是 computed 属性 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 Whosebug

Answer 1

请按以下方式更改代码。

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

抱歉，我不熟悉这种行为，但据我搜索，您的问题可能与 Vue Loader 的以下页面所说的内容有关。

Asset URL Handling | Vue Loader