buuing / lucky-canvas

🎖🎖🎖 基于 TS + Canvas 开发的【大转盘 / 九宫格 / 老虎机】抽奖插件,🌈 一套源码适配多端框架 JS / Vue / React / Taro / UniApp / 微信小程序等,🎨 奖品 / 文字 / 图片 / 颜色 / 按钮均可配置,支持同步 / 异步抽奖,🎯 概率前 / 后端可控,🚀 自动根据 dpr 调整清晰度适配移动端

Home Page:https://100px.net

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

react,老虎机用图片没显示

Pursuetheyoung opened this issue · comments

  • 你当前是什么框架(必填): react
  • 你使用的是哪个包(必填):直接通过yarn安装的包 非小程序
  • 你当前插件的版本(必填):yarn 版本^0.1.13
  • 当前环境是小程序还是浏览器(选填):浏览器
  • 详细描述你的bug:我用的是老虎机,我使用图片没显示
  • 问题代码(重要):
import React, { useRef, useState } from "react"
import { SlotMachine } from "@lucky-canvas/react"
import styles from "./index.less"

export default function index() {
  const slotRef = useRef<{ play: Function }>(null)
  //背景
  const [blocks] = useState([
    {
      imgs: [
        {
          src: "https://skx-h5-file.oss-cn-hangzhou.aliyuncs.com/h5_project_img/assets/games/eggFrenzys_main_bg1.0.png",
          width: "100%",
          height: "100%",
        },
      ],
    },
  ])

  // 插槽
  const slots = useState([{ speed: 1 }, { speed: 4 }, { speed: 20 }])

  //奖品
  const prizes = useState([
    {
      background: "red",
      imgs: [
        {
          width: "100%",
          height: "100%",
          src: "https://img.shikestar.com/2023/07/18/f20d30d9d6b54452897be741c0639f7e.jpg",
        },
      ],
    },
    {
      imgs: [
        {
          width: "100%",
          height: "100%",
          src: "http://img.shikestar.com/2023/07/20/b883b5af28e54b0397e4ff5fdce37cf7.png",
        },
      ],
    },
    {
      imgs: [
        {
          width: "100%",
          height: "100%",
          src: "http://img.shikestar.com/2023/07/20/b883b5af28e54b0397e4ff5fdce37cf7.png",
        },
      ],
    },
    {
      imgs: [
        {
          width: "100%",
          height: "100%",
          src: "http://img.shikestar.com/2023/07/20/02315a8c50c84476a439c649a15bae8b.png",
        },
      ],
    },
  ])

  const defaultConfig = useState({
    rowSpacing: "10px",
    colSpacing: "10px",
  })

  return (
    <div className={styles.pages}>
      <SlotMachine
        ref={slotRef}
        width="5rem"
        height="3rem"
        blocks={blocks}
        prizes={prizes}
        slots={slots}
        defaultConfig={defaultConfig}
        className={styles.slot_box}
      />
    </div>
  )
}

@Pursuetheyoung 你好,请问怎么解决的,同样遇到背景图不展示的问题

@Pursuetheyoung 你好,请问怎么解决的,同样遇到背景图不展示的问题

代码贴一下