無法使用 React 在瀏覽器上呈現 PNG

Question

我有一個 React 應用程序，但是當我嘗試在“src”文件夾中渲染 PNG 文件時，我在 Google Chrome 瀏覽器上得到以下信息：

我的項目中沒有公共文件夾，所以我無法將圖像文件放在那里。 以下是我加載圖像時的代碼：

我能做些什么呢？

非常感謝！

Answer 1

您可以使用兩種簡單的方法來解決，其中一種是將圖像地址作為常量，另一種可以直接傳遞地址。 為了澄清圖像不能在您的項目之外（沒有絕對路徑），即圖像的方向應如下所示../splunk-logo.png

import "./styles.css";
const image = require("./Landscape.jpg");

export default function App() {
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      {/* One way */}
      <img src={image} alt="Landscape img" height="200px" />
      <br />
      {/* Second way */}
      <img src={require("./Landscape.jpg")} alt="Second Land" height="200px" />
      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
}

在這里測試