uni-app 如果一个<view>节点使用 :style加插值字符串的方式设置背景图片，且包含<scroll-view>节点时，控制台会报错

uni-app 如果一个<view>节点使用 :style加插值字符串的方式设置背景图片，且包含<scroll-view>节点时，控制台会报错

开发环境 版本号 项目创建方式
Windows win10 HBuilderX
3.3.2
1.05.2112141
2.21.2

产品分类：uniapp/小程序/微信

示例代码：

<template>  
    <view class="page" :style="{backgroundImage: `url(${this.getUrl()})`}">  
        <!-- 如果添加<scroll-view>节点，控制台报错，不添加，控制台不报错 -->  
        <scroll-view></scroll-view>  
    </view>  
</template>  
<script>  
    export default {  
        methods: {  
            getUrl() {  
                return "https://avatar.csdnimg.cn/D/7/E/3_qq_37547964_1575443075.jpg"  
            }  
        }  
    }  
</script>  

<style>  
    .page {  
        width: 100vw;  
        height: 100vh;  
    }  
</style>

操作步骤：

<template>  
    <view class="page" :style="{backgroundImage: `url(${this.getUrl()})`}">  
        <!-- 如果添加<scroll-view>节点，控制台报错，不添加，控制台不报错 -->  
        <scroll-view></scroll-view>  
    </view>  
</template>  
<script>  
    export default {  
        methods: {  
            getUrl() {  
                return "https://avatar.csdnimg.cn/D/7/E/3_qq_37547964_1575443075.jpg"  
            }  
        }  
    }  
</script>  

<style>  
    .page {  
        width: 100vw;  
        height: 100vh;  
    }  
</style>

预期结果：

  • 控制台不报错

实际结果：

  • 控制台报错
[渲染层网络层错误] Failed to load local image resource /pages/index/undefined   
the server responded with a status of 500 (HTTP/1.1 500 Internal Server Error)   
(env: Windows,mp,1.05.2141; lib: 2.21.2)

更多关于uni-app 如果一个<view>节点使用 :style加插值字符串的方式设置背景图片，且包含<scroll-view>节点时，控制台会报错的实战教程也可以访问 https://www.itying.com/category-93-b0.html

5 回复

直接使用微信小程序（不使用 uni-app ）测试一下 试下在view上加个v-if=“getUrl()”

更多关于uni-app 如果一个<view>节点使用 :style加插值字符串的方式设置背景图片，且包含<scroll-view>节点时，控制台会报错的实战教程也可以访问 https://www.itying.com/category-93-b0.html


··· <view class="page" style="{{'background-image:'+('url('+$root.g0+')')+';'}}"> <scroll-view></scroll-view> </view> ··· 这是编译到微信开发者工具.wxml的格式，如果在微信开发者工具中移除掉 scroll-view，是不会报错的。

在hBuilderX的 view 上加 v-if=“getUrl()”，也不会报错。

其实上面的代码，只是报错，不影响使用，只是我不希望看到报错信息，看着很不爽。

这个问题是由于微信小程序对背景图片URL的解析机制导致的。当<view>节点使用:style绑定背景图片，并且包含<scroll-view>时，微信小程序在解析模板时会尝试预加载背景图片，但此时getUrl()方法可能还未执行或返回的URL未被正确解析。

解决方案：

  1. 使用计算属性替代方法调用：
computed: {
  backgroundStyle() {
    return {
      backgroundImage: `url(${this.getUrl()})`
    }
  }
}

模板中改为：:style="backgroundStyle"

  1. 使用静态样式+动态类名：
data() {
  return {
    bgImage: ''
  }
},
mounted() {
  this.bgImage = this.getUrl()
}

模板：:style="{backgroundImage:url(${bgImage})}"

  1. 使用行内样式字符串（不推荐，但可临时解决）：
<view :style="`background-image: url(${getUrl()})`">
回到顶部