uniapp+vue3在微信小程序中预览/真机调试

[xxxMMS1]

• 你当前是什么框架(必填)：uniapp vue3 +ts

• 你使用的是哪个包(必填)： "@lucky-canvas/uni": "^0.0.13",
  "lucky-canvas": "^1.7.27",

• 你当前插件的版本(必填)：pnpm: 9.15.0

• 当前环境是小程序还是浏览器(选填)：uniapp 打包 微信小程序

• 详细描述你的bug：在预览/真机调试情况下。 没有显示背景图(blocks) 按钮图片也没有显示(buttons),控制台无任何报错(功能一切正常)

• 问题代码(重要)：

// 代码开始, 别再放歪了行吗
<template>
  <nav-placeholder />
  <image class="bg-image" src="@/static/whleeBg.png" mode="aspectFill" />
  <image class="go-back" @click="handleGoBack" src="@/static/goback.png" />
  <view class="wheel-container">
    <view class="wheel-wrapper">
      <view class="wheel-outer">
        <!-- 大转盘抽奖 -->
        <LuckyWheel
          class="lucky-wheel"
          ref="myLucky"
          width="680rpx"
          height="680rpx"
          :blocks="blocks"
          :prizes="prizes"
          :buttons="buttons"
          :defaultStyle="defaultStyle"
          @start="startCallBack"
          @end="endCallBack"
        />
      </view>
    </view>
    <view
      class="result-box"
      v-if="resultText"
      :class="{ 'show-result': resultText, 'hide-result': isHiding }"
    >
      <image
        class="ribbon-icon"
        src="@/static/wheelColoredribbon.png"
        mode="aspectFit"
      />
      <text class="result-text">{{ resultText }}</text>
    </view>
    <image
      v-if="actionImage"
      class="action-image"
      :src="actionImage"
      mode="aspectFit"
    />
  </view>
</template>

<script setup lang="ts">
import { ref, shallowRef } from "vue";
import random from "random";
import LuckyWheel from "@lucky-canvas/uni/lucky-wheel"; // 大转盘

// 大转盘 配置文档：https://100px.net/docs/wheel.html
const myLucky = shallowRef<LuckyWheel | null>(null);
const blocks = [
  {
    padding: "20px",
    imgs: [
      {
        src: "/static/wheelRotate.png",
        width: "680rpx",
        height: "680rpx",
      },
    ],
  },
];
const prizes = [
  { fonts: [{ text: "真心话", top: "10%" }], background: "#D3FFFE" },
  { fonts: [{ text: "大冒险", top: "10%" }], background: "#F89ABE" },
  { fonts: [{ text: "喝酒", top: "10%" }], background: "#D3FFFE" },
  { fonts: [{ text: "发红包", top: "10%" }], background: "#F89ABE" },
  { fonts: [{ text: "上家大冒险", top: "10%" }], background: "#D3FFFE" },
  { fonts: [{ text: "对家喝酒两次", top: "10%" }], background: "#F89ABE" },
  { fonts: [{ text: "下家真心话", top: "10%" }], background: "#D3FFFE" },
  { fonts: [{ text: "双倍惩罚", top: "10%" }], background: "#F89ABE" },
  { fonts: [{ text: "上下家喝酒", top: "10%" }], background: "#D3FFFE" },
  { fonts: [{ text: "PASS", top: "10%" }], background: "#F89ABE" },
  { fonts: [{ text: "再转一次", top: "10%" }], background: "#D3FFFE" },
  { fonts: [{ text: "免除下次惩罚", top: "10%" }], background: "#F89ABE" },
];
const buttons = [
  { radius: "50px", background: "#617df2" },
  { radius: "45px", background: "#afc8ff" },
  {
    radius: "40px",
    background: "#869cfa",
    pointer: false,
    fonts: [{ text: "", top: "-20px" }],
    imgs: [
      {
        src: "/static/wheelGo.png",
        width: "180.7rpx",
        height: "256.7rpx",
        top: "-168rpx",
      },
    ],
  },
];
const defaultStyle = {
  fontSize: "28rpx",
  lengthLimit: 0, // 文字区域宽度，能配置一行显示几个字
};
const resultText = ref("");
const isHiding = ref(false);
const actionImage = ref("");
const handleGoBack = () => {
  uni.navigateBack({ delta: 1 });
};
const startCallBack = () => {
  console.log("startCallBack");
  actionImage.value = "";
  isHiding.value = true;

  setTimeout(() => {
    resultText.value = "";
    isHiding.value = false;
  }, 300);
  myLucky.value.play();

  setTimeout(() => {
    const index = random.int(0, prizes.length - 1);
    myLucky.value.stop(index);
  }, 3000);
};

const endCallBack = (prize: any) => {
  const showDetailButtonBloack = [
    { text: "真心话", class: "真心话" },
    { text: "大冒险", class: "大冒险" },
    { text: "喝酒", class: "喝酒" },
    { text: "发红包", class: "发红包" },
    { text: "下家真心话", class: "真心话" },
    { text: "上家大冒险", class: "大冒险" },
    { text: "对家喝酒两次", class: "喝酒" },
    { text: "上下家喝酒", class: "喝酒" },
  ];
  resultText.value = prize.fonts[0].text;

  const matchedButton = showDetailButtonBloack.find(
    (btn) => btn.text === prize.fonts[0].text
  );
  if (matchedButton) {
    setTimeout(() => {
      switch (matchedButton.class) {
        case "喝酒":
          actionImage.value = "/static/hejiu.png";
          break;
        case "大冒险":
          actionImage.value = "/static/damaoxian.png";
          break;
        case "发红包":
          actionImage.value = "/static/fahongbao.png";
          break;
        case "真心话":
          actionImage.value = "/static/zhenxinhua.png";
          break;
        default:
          actionImage.value = "";
      }
    }, 800);
  } else {
    actionImage.value = "";
  }
  console.log("endCallBack");
};
</script>


// 代码结束

[xxxMMS1]

已经修改好了 ，作者很有耐心 近乎手把手教我了 赞

[shwzh]

如何修的 ，我现在小程序遇到背景图和其他图片不显示的问题，请教，请帮忙说一下，或者代码发一下 什么问题

[buuing]

升级到最新版本