为什么我无法在 react.js 中显示我的图像

Question

我试图在我的页面上显示两个 svg 图像以进行响应，但它不起作用，你知道为什么吗？

这是 manifest.json 文件：

{
  "short_name": "React App",
  "name": "Create React App Sample",
  "icons": [
    {
      "src": "stone_black.svg",
      "sizes": "64x64",
      "type": "image/svg+xml"
    },
    {
      "src": "stone_white.svg",
      "sizes": "64x64",
      "type": "image/svg+xml"
    }
  ],
  "start_url": ".",
  "display": "standalone",
  "theme_color": "#000000",
  "background_color": "#ffffff"
}

这是我实现它的地方：

function Square(props) {
    // Elements that will display the game stones
    var srcToDisplay = ""
    if (props.value === "white") {
        srcToDisplay = "public/stone_white.svg"
    } else if (props.value === "black") {
        srcToDisplay = "public/stone_black.svg"
    } else {
        srcToDisplay = ""
    }
    return (
        <button
        className="squares"
        onClick={props.onClick}>
            <img src={srcToDisplay} />
        </button>
    )
  }

提前致谢:)

Answer 1

在 React 中使用图像时，一般规则是将图像导入组件。我不知道你设置的具体细节，但如果你使用的是 React 的大多数标准设置，你应该使用这样的设置：

import stone_white from 'public/stone_white.svg'; // The relative path to the image 
import stone_black from 'public/stone_black.svg';

function Square(props) {
    // Elements that will display the game stones
    if (props.value === "white") {
        srcToDisplay = stone_white;
    } else if (props.value === "black") {
        srcToDisplay = stone_black;
    } else {
        srcToDisplay = ""
    }
    return (
        <button
        className="squares"
        onClick={props.onClick}>
            <img src={srcToDisplay} />
        </button>
    )
  }

此外，您可能不想从 public 目录中获取图像。您可能需要考虑将图像存储在 src 文件夹中的专用目录中。

为什么我无法在 react.js 中显示我的图像

Why I can't display my images in react.js

javascript

json

manifest

mime-types

reactjs