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>

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

这是计算属性情况下的完整错误消息

[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

Answer 1

请如下更改代码。

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

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

Asset URL Handling | Vue Loader

Vue.js渲染具有自定义计算属性的v-bind：style背景图像url无效

1 个答案: