React 不会在 Safari 或 IE 或任何移动网络浏览器中加载图像

梅里斯塔克

我使用 reactJS 开发了一个应用程序,它在这里启动可以在此处找到该应用程序的源代码该应用程序在 chrome 和 firefox 中完美运行,但在 Internet Explorer、Safari 和所有移动网络浏览器中,当我选择第二种模式时,我无法在单击框时呈现图像。

应用程序.js

import React, { Component } from 'react';

import './App.css';

import Status from'./components/Status';
import GameStatus from'./components/GameStatus';

const connery = require("./images/connery.svg");
const square = require("./images/square.svg");

class App extends Component {


  constructor(props){

    super(props)

    this.state = {

      board : Array(9).fill(null),
      player : null,
      winner : null,
      gamemode : null,
      /* array to store the ndex */
      order_ndex : []
    }

  }

  //Winning conditions
  checkWinner(){

    let winLines =
      [
        ["0", "1", "2"],
        ["3", "4", "5"],
        ["6", "7", "8"],
        ["0", "3", "6"],
        ["1", "4", "7"],
        ["2", "5", "8"], 
        ["0", "4", "8"],
        ["2", "4", "6"]
      ]

    this.checkmatch(winLines)
  }

  //Checks if the current state matches the winning condition
  checkmatch(winLines){
    let board = this.state.board;
    for (let index = 0; index < winLines.length; index++) {
      const [a,b,c]=winLines[index];
      if(board[a] && board[a] === board[b] && board[a] === board[c] ){
        this.setState({
          winner : this.state.player
        })
        this.state.winner = this.state.player;
      }
    }
    if(!this.state.winner && !board.includes(null)){
      this.setState({
          winner : "None"
      })
    }
  }

  handleClick(index){

    if(this.state.player && !this.state.winner){

      let newBoard = this.state.board

      if(this.state.board[index]===null){

        newBoard[index] = this.state.player
        /* push the last index into the array */
        this.state.order_ndex.push(index) 
        this.setState({
          board: newBoard,
          player: this.state.player==="X" ? "O" : "X"
        })

        this.checkWinner()

      }
    }
  } 

  //Set the current state of Player
  setPlayer(player){
    this.setState({player})
  }

  //Set the current state of the Game mode
  setGameMode(gamemode){
    this.setState({gamemode})
  }

  //Renders the boxes into DOM
  renderBoxes(){
    const isFrontend = this.state.gamemode === "Frontenddevlandia";
    return this.state.board.map(
      (box, index) => (
      <div 
        className="box" 
        key={index} 
        onClick={() => {
          this.handleClick(index);
        }}
      >
        {box === "X" && isFrontend && <img src={connery} alt="X"/>}
        {box === "O" && isFrontend && <img src={square} alt="O"/>}
        {!isFrontend && box}
      </div>
    ));
  }

  reset(){
    this.setState({
      board : Array(9).fill(null),
      player :  null,
      winner : null,
      setGameMode : null,
      order_ndex : []
    })

  } 

  undo() {
    let ndex = this.state.order_ndex.pop() 
    let newBoard = this.state.board
    let prev = newBoard[ndex]
    newBoard[ndex] = null
    this.setState({
      board: newBoard,
      player: prev
    })
  }


  render() {

    return (

      <div className="container">
        <h1>Tic Tac Toe</h1>

        <GameStatus 
          gamemode ={this.state.gamemode} 
          setGameMode = {(e)=> this.setGameMode(e)}
        />

        <Status
          player={this.state.player} 
          setPlayer={(e) => this.setPlayer(e)}
          gamemode ={this.state.gamemode} 
          winner = {this.state.winner}
        />

        <div className="board">

          {this.renderBoxes()}

        </div>
        <div className="btn">
          <button className='reset' onClick = {() => this.reset()}> 
            {" "}
            Reset{" "} 
          </button>
          <div className="divider"/>
          <button 
            className='reset' 
            disabled ={this.state.winner} 
            onClick = {() => this.undo()}
          > 
            {" "}
            Undo{" "} 
          </button>
        </div>
      </div>
    );
  }
}

export default App;

如您所见,我已经使用过require("./images/connery.svg"),我可以知道我做错了什么吗?

梅里斯塔克

我只是用 PNG 图像替换了 SVG 图像,效果很好。当我在线转换时,SVG 图像存在一些问题。

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

IE不会在图像地图中填充区域

来自分类Dev

JS opener.parent不会在ipad Safari浏览器上触发

来自分类Dev

不会在IE浏览器的集合中删除Backbone js模型

来自分类Dev

来自Javascript文件的方法将在IE中加载,但不会在Chrome中加载

来自分类Dev

淘汰赛动态模板不会在IE9中加载

来自分类Dev

Translate3d不会在Safari中移动嵌入式元素(仅Windows)

来自分类Dev

jQuery事件$ {document).ready不会在iPhone 5上与移动Safari一起触发

来自分类Dev

HTTPS网站不会在IE9和Chrome中加载,但会在本地网络上的Firefox中加载

来自分类Dev

Bootstrap Modal不会在MOBILE chrome上触发,在移动Firefox / ie上也能正常工作

来自分类Dev

harmon.ie不会在Outlook 2016启动时加载

来自分类Dev

带有 SVG 图像的 Sphinx 文档不会在 IE11 上呈现

来自分类Dev

字体不会在IE中呈现

来自分类Dev

不会在 IE 上执行的 CSS

来自分类Dev

图片不会在移动浏览器中加载(抛出500错误)

来自分类Dev

React 样板不会在 index.html 中加载 js 文件

来自分类Dev

.Net WebBrowser控件不会在Win7和IE 11下加载HTML页面中的所有图像

来自分类Dev

Google字体不会在Windows浏览器中加载,但会在Mac浏览器中加载

来自分类Dev

Socket.io不会在我的React App中的浏览器后退按钮上断开连接

来自分类Dev

当我运行Npm Start时,React页面不会在浏览器中实时更改

来自分类Dev

除非没有子级,否则移动Safari不会在视口之外呈现固定元素

来自分类Dev

React Webpack捆绑器不会在文件更改时重新编译

来自分类Dev

react-router 不会在服务器端呈现组件

来自分类Dev

除非您按住并选择“在新页面中打开/打开”,否则链接不会在Safari Iphone浏览器中打开新页面。

来自分类Dev

数据不会在div中加载

来自分类Dev

单击标签内的图像图标不会在IE上切换复选框状态

来自分类Dev

ng-model不会在IE中更新

来自分类Dev

提交输入不会在IE和Firefox中发布

来自分类Dev

特定的Gif不会在IE中重新启动

来自分类Dev

chart.js 不会在 IE 中显示图表

Related 相关文章

  1. 1

    IE不会在图像地图中填充区域

  2. 2

    JS opener.parent不会在ipad Safari浏览器上触发

  3. 3

    不会在IE浏览器的集合中删除Backbone js模型

  4. 4

    来自Javascript文件的方法将在IE中加载,但不会在Chrome中加载

  5. 5

    淘汰赛动态模板不会在IE9中加载

  6. 6

    Translate3d不会在Safari中移动嵌入式元素(仅Windows)

  7. 7

    jQuery事件$ {document).ready不会在iPhone 5上与移动Safari一起触发

  8. 8

    HTTPS网站不会在IE9和Chrome中加载,但会在本地网络上的Firefox中加载

  9. 9

    Bootstrap Modal不会在MOBILE chrome上触发,在移动Firefox / ie上也能正常工作

  10. 10

    harmon.ie不会在Outlook 2016启动时加载

  11. 11

    带有 SVG 图像的 Sphinx 文档不会在 IE11 上呈现

  12. 12

    字体不会在IE中呈现

  13. 13

    不会在 IE 上执行的 CSS

  14. 14

    图片不会在移动浏览器中加载(抛出500错误)

  15. 15

    React 样板不会在 index.html 中加载 js 文件

  16. 16

    .Net WebBrowser控件不会在Win7和IE 11下加载HTML页面中的所有图像

  17. 17

    Google字体不会在Windows浏览器中加载,但会在Mac浏览器中加载

  18. 18

    Socket.io不会在我的React App中的浏览器后退按钮上断开连接

  19. 19

    当我运行Npm Start时,React页面不会在浏览器中实时更改

  20. 20

    除非没有子级,否则移动Safari不会在视口之外呈现固定元素

  21. 21

    React Webpack捆绑器不会在文件更改时重新编译

  22. 22

    react-router 不会在服务器端呈现组件

  23. 23

    除非您按住并选择“在新页面中打开/打开”,否则链接不会在Safari Iphone浏览器中打开新页面。

  24. 24

    数据不会在div中加载

  25. 25

    单击标签内的图像图标不会在IE上切换复选框状态

  26. 26

    ng-model不会在IE中更新

  27. 27

    提交输入不会在IE和Firefox中发布

  28. 28

    特定的Gif不会在IE中重新启动

  29. 29

    chart.js 不会在 IE 中显示图表

热门标签

归档