试图将图像放置在固定位置。为什么在我刷新页面之前图像放错了位置？

Question

这里是新手。

我刚开始在 codesandbox 上玩 ReactJS。我想将图像元素（绿色箭头）保留在仪表元素上方的特定位置。我尝试了我能想到的最简单的方法，它有点适合我的需要，但是...... 当我打开页面时，图像放错了位置，但如果我刷新页面，图像就会正好在我想要的位置……为什么？！可能是什么原因以及如何解决它的任何想法？也许，你能告诉我在 div 中的特定位置定位图像的任何其他方法吗？

这是 link：https://codesandbox.io/embed/gauge-ship-engine-1-h2nhx?fontsize=14&hidenavigation=1&theme=dark&codemirror=1

代码如下：

import React from "react";
import ReactDOM from "react-dom";
import "./styles.css";
import ReactSpeedometer from "react-d3-speedometer";
import "bootstrap/dist/css/bootstrap.min.css";
import Container from "react-bootstrap/Container";
import Row from "react-bootstrap/Row";
import Col from "react-bootstrap/Col";
import arrow from "./greenarrow.png";

class Gauge extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      value: ""
    };

    this.handleGaugeValueChange = this.handleGaugeValueChange.bind(this);
  }

  handleGaugeValueChange(e) {
    console.log(1);

    this.setState({
      value: e.target.value
    });
  }

  render() {
    return (
      <div className="center">
        <h1 className="title">Ship Engine 1</h1>

        <Container className="p-3">
          <Row>
            <Col>
              <div
                className="speedometer"
                style={{
                  width: "100%",
                  display: "flex",
                  justifyContent: "center",
                  alignItems: "center"
                }}
              >
                <img
                  src={arrow}
                  alt="greenarrow"
                  style={{
                    position: "absolute",
                    opacity: 1,
                    zIndex: "1",
                    transform: "rotate(-35deg)",
                    marginLeft: "-65px",
                    marginTop: "-80px"
                  }}
                />

                <ReactSpeedometer
                  maxValue={150}
                  ringWidth={20}
                  customSegmentStops={[0, 30, 55, 65, 90, 120, 150]}
                  segmentColors={[
                    "#FAFAFA",
                    "#FAFAFA",
                    "#007fff",
                    "#FAFAFA",
                    "#FAFAFA",
                    "#FAFAFA"
                  ]}
                  needleHeightRatio={0.72}
                  valueTextFontSize="19px"
                  needleTransitionDuration={9000}
                  needleTransition="easeElastic"
                  currentValueText="${value} kW"
                  value={this.state.value}
                />
              </div>
              <div className="divLabelReq">
                <label
                  className="labelReq"
                  htmlFor="value"
                  style={{ color: "#6b6964" }}
                >
                  Requested: 39.7kW
                </label>
              </div>
            </Col>
            <Col>
              <form className="form-settings" onSubmit={this.handleSubmit}>
                <div className="form-row">
                  <div className="form-group col-md-5">
                    <label
                      className="label"
                      htmlFor="value"
                      style={{ color: "white" }}
                    >
                      Change Gauge Value:{" "}
                    </label>
                    <input
                      type="number"
                      className="form-control"
                      name="value"
                      id="value"
                      placeholder="0"
                      onChange={this.handleGaugeValueChange}
                      value={this.state.keywords}
                    />
                  </div>
                </div>
              </form>
            </Col>
          </Row>
        </Container>
      </div>
    );
  }
}

export default Gauge;

const rootElement = document.getElementById("root");
ReactDOM.render(<Gauge />, rootElement);

提前致谢！

Answer 1

看起来你的绿色箭头没有参考。例如，父元素没有声明位置。尝试类似的东西：

         <div
            className="speedometer"
            style={{
              width: "100%",
              display: "flex",
              justifyContent: "center",
              alignItems: "center",
              position: "relative"
            }}
          >

试图将图像放置在固定位置。为什么在我刷新页面之前图像放错了位置？

Trying to place an image in a fixed positon. Why the image is misplaced until I do a page refresh?

html

css

image

reactjs

codesandbox