无法在js文件中指定图像路径

can't specify image path inside js file

我正在尝试从组件文件夹内的 'home.js' 文件内的 'images' 文件夹导入图像。我尝试了 '../' 和 './' 的多种组合，但图像无法加载到页面上。路径可能有问题。

react 中正确的语法是：

import astronaut from '../images/astronaut.png';

<img src={astronaut} alt="logo" />

由于您使用的是 React，您是否检查过组件是否被渲染到视图中？ 其他因素可能是您应用的 类 'home-wrapper' 或 'backImg'

我通常会添加一些占位符文本来检查它是否弹出。

关于 Omars 的回答，是的，您只需返回两个目录即可访问该图像，就像这样

<img src="../../images/astronaut.png" alt="astronaut"/>

当您提供亲戚 URL 时，它必须从 HTML 的 URL 到图像的 URL。

您正在尝试从 JavaScript 文件的文件路径转到图像的文件路径。

由于图像不在public目录中，所以很可能图像在第一个目录中甚至没有URL地方。

这里有两种基本方法可以用来确定 URL。

手动

您需要将图像放在具有 URL.

的位置

如何执行此操作取决于您使用的 HTTP 服务器。您需要确保图像在您的开发和生产环境中具有相同的 URL（或至少与 HTML 文档相关）。

例如，您可以将其放在public目录中，然后说src="public/images/yourimage.jpeg"。 （请注意，我正在假设您的开发服务器如何将 URL 分配给此处 public 目录中的文件）。

使用您的捆绑器

通常在使用 React 时（正如您看起来正在做的那样），您将使用像 Webpack 这样的工具来生成网站的生产就绪版本。这将执行诸如删除缓慢的调试例程、摇树以从未使用的模块中删除代码等操作。

Webpack 有 features for handling images 所以一旦你设置了支持它的配置文件，你就可以这样做：

import MyImage from '../../../images/yourimage.jpeg';

和

<img src={MyImage} alt="etc etc" />

注意这里的路径是相对于JS文件的路径，需要用{}给src赋值。