【问题标题】:How to set correct src path (GET localhost getting 404 (Not Found))?如何设置正确的 src 路径(GET localhost getting 404 (Not Found))?
【发布时间】:2017-01-15 15:52:54
【问题描述】:

我设置了 ReactJS 和 Webpack。我正确设置了 src 路径,但仍然出现以下错误,我似乎无法弄清楚原因。尝试了所有,例如 ./、/、../ 等。图像称为 practiceImage.jpg,它位于我的公共文件夹内的媒体文件夹中。

为什么找不到?正确的路径应该是什么?

在我的页面文件夹中的home-page.js 中:

  <div>
    <img src="../../public/media/practiceImage.jpg"
      style={{width: '100%', height: '100%'}}
    />
  </div>

但没有渲染,我在浏览器上看到损坏的图像和错误GET http://localhost:8080/public/media/practiceImage.jpg 404 (Not Found)

是我的目录树:

【问题讨论】:

  • 如果public 是根文件夹,则相对于根目录使用:&lt;img src="/media/practiceImage.jpg" /&gt;
  • @skobaljic 你如何确定某个东西是否是根文件夹以查看是否相对?
  • 应用程序通常将一个文件夹设置为公共文件夹,将文件夹结构中的其他文件路径作为样式表与您在服务器上看到的进行比较。例如,如果您的 css 在 public/css/style.css 中,但在服务器上是 css/style.css,那么您的公用文件夹是 public 并将其视为服务器根目录。
  • @skobaljic 请看一下原帖中目录树的图像。我的public 文件夹确实包含样式表。所以public文件夹有这两个路径:public -&gt; stylesheets -&gt; base.scsspublic -&gt; media -&gt; practiceImage.jpg。基于此,我应该尝试什么?

标签: javascript css node.js reactjs webpack


【解决方案1】:

您应该在require() 调用中包装 webpack 可以处理的文件路径。

<img src={ require( "../../public/media/practiceImage.jpg" ) } ...

延伸阅读:http://blog.andrewray.me/webpack-when-to-use-and-why/

【讨论】:

猜你喜欢
  • 2019-01-27
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2019-01-31
  • 1970-01-01
  • 2017-06-21
  • 2021-11-20
  • 2019-10-21
相关资源
最近更新 更多