当前位置: 首页 > 知识库问答 >
问题:

react.js上img的正确路径

酆高翰
2023-03-14

我有一些问题,我的图像在我的反应项目。事实上,我一直认为进入src属性的相对路径是建立在文件体系结构上的

这里是我的文件体系结构:

components
    file1.jsx
    file2.jsx
    file3.jsx
container
img
js 
... 

然而,我意识到路径是建立在URL上的。在我的一个组件(例如file1.jsx)中,我有以下内容:

localhost/details/2
<img src="../img/myImage.png" /> -> works

localhost/details/2/id
<img src="../img/myImage.png" /> -> doesn't work, images are not displayed

怎么可能解决这个问题呢?我希望在react-router处理的任何形式的路由中,所有图像都可以用相同的路径显示。

共有1个答案

凤晨朗
2023-03-14

您使用的是相对url,它相对于当前url,而不是文件系统。您可以通过使用绝对URL来解决此问题

但当您部署到www.my-domain.bike或任何其他站点时,这就不太好了。最好使用相对于站点根目录的url

 类似资料:
  • 问题内容: 我的React项目中的图片有问题。的确,我一直认为src属性的相对路径是建立在文件架构上的 这是我的文件架构: 但是我意识到路径是建立在URL上的。在我的一个组件中(例如到file1.jsx中),我有这个: 如何解决这个问题?我希望在react-router处理的任何形式的路由中,所有图像都可以使用相同的路径显示。 问题答案: 您使用的是相对网址,相对于当前网址,而不是文件系统。您可以

  • 问题内容: 我有一个react组件,它是列表中的详细信息视图。 我试图用默认图像替换该图像,如果该图像不存在并且出现404错误。 我通常会在img标签中使用onerror方法,但这似乎不起作用。 我不确定如何做出反应。 这是我的组件: 问题答案: 由于没有完美的答案,因此我正在发布我使用的代码段。我正在使用回退到的可重用组件。 由于后备图片可能再次失败并触发无限次重新渲染循环,因此我添加了状态。

  • 问题内容: 我正在尝试使用带有剑道分离器的Reactjs。拆分器的样式属性如下 使用Reactjs,如果我正确理解了所有内容,则可以使用内联样式来实现 但是,我也使用Dustin Getz jsxutil尝试将内容拆分成更多部分并具有独立的html片段。到目前为止,我有以下html片段(splitter.html) 和splitter.js组件,该组件按如下方式引用此html 现在,当我运行此命令

  • umi max如何使用useModel? 我使用了ant-design-pro脚手架,在里面使用了useModel,创建了一个 文件名为 useTestModel.ts文件,目录结构为 ./src/pages/System/useTestModel 我在另一个文件里使用useModel,提示找不到此文件 在其他文件中使用 页面一直提示找不到 counter 我看umi max的文档写的也不清不楚的

  • 问题内容: 我知道有很多类似或相同的问题,但是我仍然无法理解/找到正确的方法来使用模块。Python是我最喜欢的语言,除使用导入外,我喜欢其中的所有内容:递归导入(当您尝试引用尚不存在的名称时),导入路径等。 因此,我有这种项目结构: 可以用作独立单位,但也应由导入。我现在在做什么,例如,在我编写中,即使用导入模块的完整路径。我这样做是因为,如果我使用-当从另一个包()中导入该模块时,它将不起作用

  • 我尝试执行一个jar xuggle-xuggler.jar,但出现以下错误(我在jar目录中使用java-jar命令执行): 清单-版本:1.0 Ant-版本:Apache Ant 1.8.2 创建人:1.6.0_23-B23(Sun Microsystems Inc.) 实施-供应商:www.xuggle.com 实施-标题:xuggle-xuggler 实施-版本:5.4.0 主类:com.x