代码之家  ›  专栏  ›  技术社区  ›  assert

无法解析图像路径

  •  0
  • assert  · 技术社区  · 2 年前

    大家好。

    我在我的项目中遇到了一个与未找到路线有关的问题。问题是我的应用程序托管在vercel上,如果你添加两条路线,图像就会消失。例如,如果我想做baseURL/randomthing-图像会出现,但是,如果我做baseURL/landomthing/anotherrandomthing,图像会消失。在去bug之后,我发现这个问题与我导入图像的方式有关。

    导致错误的代码

    <img src="./plug-in.png" style={imageStyle} />

    如果您尝试在图像路径中添加另一个“.”语法/plug-in.png,您将在第二条路径上获得图像,依此类推。

    我尝试了很多东西。知道为什么会发生这种事吗?

    这是代码: github

    这就是应用程序: https://chess-game-gani.vercel.app/

    提前谢谢。

    1 回复  |  直到 2 年前
        1
  •  3
  •   Jarmo T    2 年前

    您希望为图像使用动态路径,例如:

    <img src="/plug-in.png" style={imageStyle} />
    

    这是因为 ./ 将始终尝试从当前所在的同一目录中获取文件,而路径 / 将始终以站点的根目录为目标。

    例如,如果您在路由domain.com/route中 / path将在domain.com/route/目录中查找映像,但路径 / 将在domain.com/目录中查找映像。