Vue.js 使用自定义计算属性渲染 v-bind:style 背景图像 url 不起作用答案

【问题标题】：Vue.js rendering v-bind:style background-image url with custom computed property does not workVue.js 使用自定义计算属性渲染 v-bind:style 背景图像 url 不起作用
【发布时间】：2019-03-13 17:25:23
【问题描述】：

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

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

这是计算属性案例的完整错误信息

[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

【问题讨论】：

您尝试return require('./path/to/image');时的结果如何？
有效！我很惊讶。你能解释一下潜在的机制吗？我
我已发布为答案并添加了参考网页

标签： vue.js data-binding background-image render computed-properties

【解决方案1】：

请修改如下代码。

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

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

Asset URL Handling | Vue Loader

【讨论】：