【报Bug】nvue页面首次加载的时候无法展示image图片

5***@qq.com

我现在用的3.1.1都不行，nvue项目

2021-07-29 18:54

459114173 (作者)

<template>

<view class="content">

<image class="bgImg" src="../../static/images/book/bg2.png"></image>

<view class="input-box" @click="search()">

<view class="input-box-input"><text style="color:#c0c0c0;font-size: 32rpx;">请输入规格书型号/品牌</text></view>

<image class="search" :src="searchImg"></image>

</view>

<radio-group class="block">

<view class="cu-form-group" @click="chooseRadio('A')">

<text class="title">型号</text>

<radio class="radio" :class="radio == 'A' ? 'checked' : ''" :checked="radio == 'A' ? true : false" value="A"></radio>

</view>

<view class="cu-form-group" @click="chooseRadio('B')">

<text class="title">品牌</text>

<radio class="radio" :class="radio == 'B' ? 'checked' : ''" :checked="radio == 'B' ? true : false" value="B"></radio>

</view>

</radio-group>

</view>

</template>

<script>

export default {

data() {

return {

radio: 'A',

searchImg:'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgEAYAAAAj6qa3AAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAAAAZiS0dEAAAAAAAA+UO7fwAAAAlwSFlzAAAASAAAAEgARslrPgAABHJJREFUaN7tl0tIG1sYx79zZrStrxjEgA20SFq0EQxFQslCEhO10uKDQlEbRKObWqFQsih2UShdSLD4anHVhQ/cZCe1aTF1ciYNSqpFU19UQYtpaDEtWomPGjOniyH3QrlwrY61l5vfZpiZw3f+33++Oec7ADFixIgRI8b/FnTUE3hVXpVXlZKypdhSbCmKimAURmH0/Hnx7cmT4vXjR7yO1/H6yIherpfr5cvLv8sALHVAF3VRF01K4uv4Or6utXXbsm3Ztnz+jBRIgRT37omjsrNRE2pCTRkZqApVoarr1+k8nafzc3N8Ip/IJ754wbfxbXzbhQtHbQArVSB3m7vN3ZaRIZQJZULZy5eQAimQEgwKgiAIglZrHDQOGgdnZwEB+qe6czY4G5wNMhkbYkNsqLkZy7Ecy8fG+GF+mB++cUNfrC/WFzscR23IL+NYcCw4Fk6cIL2kl/S+eSNWwNOndrvdbrczDJfD5XA5KtWYckw5pjx1ar9xXRqXxqUpLycmYiKmb9+4Pq6P69NopNZ/6F8gwZHgSHDcugUVUAEVCCVPJE8kTzQ2KtQKtUJ95QquwTW4Znw8bA1bw9b9l3SBr8BX4BscBD3oQf/oEa7G1bj6yROpDTg0ZJEsksXlZfHLl5SM9Iz0jPQolaSQFJLCr1/5NX6NXzMaDxo/WjlkikyRqWCQ4ziO4/LypNJ/4ArgzJyZM2dlIS3SIq1cLj599YpZYVaYlfp6yIRMyBwaEld1jjvoPLqALqALbG9TDdVQzfPnTClTypRevnzsBuBO3Ik7z5wBNahB/eFDASpABWhvD3SgA93Fi2ACE5gIkUxoO27H7YuLtJbW0tqzZ4/dAMQgBjGRCLVQC7Xgv+MYwACGx49pJa2klc+eSSUUQhCCEMsCAwwwe3vHboDI8jLkQi7kZmZGdwNDnCHOEOdyiRXx5YtUQukSXaJLajXtol20S7pG6cAG/NWxTcIkTPr9iUOJQ4lDV69KJSyKc9g57ByWycAPfvCXlLBJbBKbJF0/cPhOMBVSIbW1lXKUo9zDh7+63/8bbBFbxBY9eICyUTbKfv06fzN/M39zbu6PMWAVr+JV3NeHXMiFXCsru5Zdy66lvz/6Sxw0rrit3ryJfMiHfGYzrsJVuOr2bakSl5xoqfLxfDwf73SSclJOyt++FRMxGPaX8LlzpJ7Uk/qBATJDZsjMp0/cLDfLzV66dFS6JT8NiomwLOpG3ai7sRF2YAd2mpvBCU5whsPIi7zI++5ddDxtoS20RaWKLqbiGaK/n+bQHJpz/z7rYT2s5/v3iC1ii9g8HkEmyATZtWvGAeOAceD9+z/OgJ+hlFJKMXZr3Vq3Ni9PGBfGhfGsLFyGy3BZfLx4HwiE08Pp4XSPp3i6eLp4enPz5zikg3SQjjt3kA3ZkO3uXbyBN/CG0XjYNeHIDZAa3s7bebvVSv3UT/1WayQtkhZJ02pNdaY6U10gcNz6fhtupVvpVprNnqAn6AmePn3cemLEiBEjRoz/ID8ALzwHwuTauVgAAAAldEVYdGRhdGU6Y3JlYXRlADIwMTktMTItMzBUMTU6Mzk6MzgrMDg6MDALWAX5AAAAJXRFWHRkYXRlOm1vZGlmeQAyMDE5LTEyLTMwVDE1OjM5OjM4KzA4OjAwegW9RQAAAEp0RVh0c3ZnOmJhc2UtdXJpAGZpbGU6Ly8vaG9tZS9hZG1pbi9pY29uLWZvbnQvdG1wL2ljb25fcGt6ZHlteWZscjkvdHViaWFvLS5zdmdB1G9hAAAAAElFTkSuQmCC',

};

},

onLoad() {

const domModule = weex.requireModule('dom');

domModule.addRule('fontFace', {

fontFamily: 'iconfont',

src: "url('http://at.alicdn.com/t/font_1515948_5ftjd1ek2bp.ttf')"

});

},

methods: {

search() {

if(this.radio=='A'){

uni.navigateTo({

url: './book'

});

}else{

uni.navigateTo({

url: './brand'

});

}

},

chooseRadio(data){

this.radio=data;

}

}

};

</script>

<style>

.content {

width: 750rpx;

flex: 1;

position: relative;

align-items: center;

}

.bgImg {

position: absolute;

left: 0;

top: 0;

bottom: 0;

right: 0;

flex: 1;

width: 750rpx;

}

.input-box {

width: 600rpx;

height: 80rpx;

border-radius: 100rpx;

background-color: #fff;

position: relative;

flex-direction: row;

justify-content: space-between;

align-items: center;

margin-top: 500rpx;

}

.input-box-input {

flex: 1;

height: 60rpx;

font-size: 32rpx;

margin-left: 30rpx;

justify-content: center;

}

.search {

width: 64rpx;

height: 64rpx;

margin-right: 20rpx;

}

.block {

width: 375rpx;

flex-direction: row;

justify-content: space-between;

height: 50px;

align-items: center;

margin-top: 30rpx;

}

.cu-form-group {

flex-direction: row;

align-items: center;

}

.radio {

background-color: #fff !important;

border-radius: 50px;

width: 22px;

height: 22px;

}

.title {

margin-right: 10px;

font-size: 20px;

color: #fff !important;

/ #ifdef APP-PLUS /

margin-top: 8rpx;

/ #endif /

}

</style>

2020-03-03 11:03

459114173 (作者)

你好，我用单页面测试了uni-app模板没问题，但是如果是两个tabBar页面，第一个能够显示，第二个如果是nvue页面，图片还是无法初始化出来呢,(就是如果启动后的首页是nvue页面，这个时候图片能够展示出来，如果该nvue页面不是首页，是另外的tabBar页面，从首页跳转过去nvue页面就无法展示图片了)

2020-03-03 11:30

459114173 (作者)

已解决，谢谢

2020-03-05 15:32

359277068

回复 b***@163.com: 请问怎么解决的啊？

2022-03-29 10:15