Javascript 为什么我能'；t在react.js中显示我的图像

我试图在react中向我的页面显示两个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>
    )
  }

功能广场（道具）{
//将显示游戏石头的元素
var srcToDisplay=“”
如果（道具值==“白色”）{
srcToDisplay=“public/stone\u white.svg”
}否则如果（props.value==“黑色”）{
srcToDisplay=“public/stone\u black.svg”
}否则{
srcToDisplay=“”
}
返回(
)
}

---

提前非常感谢：）

为此，请尝试Function

function Square(props) {
    // Elements that will display the game stones
    var srcToDisplay  = ""
const handlerOnClick = () => {
 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={()=> handlerOnClick()}>
            <img src={srcToDisplay} />
        </button>
    )
  }

功能广场（道具）{
//将显示游戏石头的元素
var srcToDisplay=“”
常量handlerOnClick=（）=>{
如果（道具值==“白色”）{
srcToDisplay=“public/stone\u white.svg”
}否则如果（props.value==“黑色”）{
srcToDisplay=“public/stone\u black.svg”
}否则{
srcToDisplay=“”
}
}
返回(
handlerOnClick（）}>
)
}

在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/stone_-white.svg”导入stone_-white；//图像的相对路径
从“public/stone_black.svg”导入stone_black；
功能广场（道具）{
//将显示游戏石头的元素
如果（道具值==“白色”）{
srcToDisplay=石头白；
}否则如果（props.value==“黑色”）{
srcToDisplay=石头色；
}否则{
srcToDisplay=“”
}
返回(
)
}

---

另外，您可能不希望从

public

目录获取图像。您可能需要考虑将图像存储在

src

文件夹中的专用目录中。

嗯，我的square不是react函数组件，所以我不能这样做。如果不工作，请尝试告诉我