Question

如果有人可以让我知道我是否使用了不正确的格式来在 react 上加载图像，那就太棒了！我不是专家，非常感谢您的任何建议 - 在此先感谢您。当我运行代码时填充的图像只显示一个损坏的 img 图标，当我尝试通过终端运行时，它说该图像被调用但未加载。

import React, { Component } from "react";
import PropTypes from "prop-types";
import Logo from "/Users/mauromartineziii/aqua-financial/src/logo.png";
import "./App.css";
import Photo from "/Users/mauromartineziii/aqua-financial/src/pexels-photo-3560168.jpeg";

class App extends Component {
  render() {
    return (
      <div>
        <section>
          <header>
            <img
              src="/Users/mauromartineziii/aqua-financial/src/logo.png"
              width="333"
              alt="Aqua Financial"
            />
            <div>
              <ul>
                <li>Financial Services</li>
                <li>Liquid Capital Asset</li>
                <li>Retirement</li>
              </ul>
            </div>
          </header>
        </section>

        <section id="main">
          <img src="Photo"></img>
          <div className="main-text">
            <span>Learn What An LCA™ Can </span> <br /> Do For You <br />
          </div>
          <div className="right-text">
            <span>Innovation Driven Banking</span>
          </div>
          <div>
            {" "}
            <button>Learn More</button>
          </div>
        </section>
      </div>
    );
  }
}

export default App;

body {
  margin: 0;
  padding: 0;
  font-family: "Poppins", sans-serif;
}

section {
  margin: 0 120px;
}

header {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-top: 50px;
}

header div {
  margin-left: auto;
  font-size: 20px;
}

header ul li {
  display: inline-block;
  margin: 0 20px;
}

#main {
  margin: 0 120px;
  margin-top: 200px;
  display: grid;
  grid-template-columns: 1fr 1fr;
}

#main .main-text {
  font-size: 45px;
  font-weight: 700;
  line-height: 1.5;
}

`

Answer 1

将您在项目中使用的图像放在项目目录中并使用相对路径导入它们是个好主意，例如：

import Logo from "./logo.png";

您还想将结果变量用于 img 标签。

<img
  src={Logo}
  width="333"
  alt="Aqua Financial"
/>
// ...
<img src={Photo} />

运行代码时反应不加载图像

1 个答案: