Javascript 如何在reactjs中使用图像

这是我的密码。 我在“src”文件夹中有一个图像文件夹，我想使用我的

components/Myapp.component.js

import React from 'react';
import imageOne from '../img/cool-img.jpg';

function Myapp() {

  return (
    <div className="myapp">

      <h1>import image<h1>
      <img src={imageOne} alt="import-img" />

      <h1>relative-path image</h1>
      <img src="../img/cool-img.jpg" alt="relativepath-img" />

    </div>

  );
}

export default MyApp;

从“React”导入React；
从“../img/cool img.jpg”导入imageOne；
函数Myapp（）{
返回(
导入图像
相对路径图像
);
}
导出默认MyApp；

---

我的问题是第一个导入图像工作正常，但第二个相对路径图像不工作。

在

ReactJs

应用程序中有一些导入图像的常用方法。对于图像已分离服务器的情况，只需调用如下图像即可：

<img src="https://images.cdn.com/sample-image.png" alt="sample-image" />

就像您的第一个技巧一样，将所有照片放在一个文件夹中，并将其导入所需的每个组件中，然后使用它：

import sampleImage from'..[pathToAssets]/assets/imgs/sample image'；
~~~

---

我希望这个答案对您有所帮助。

这不起作用，因为

图像src不是使用解析的，当您使用

import

语句对文件进行解析时，它将首先由Webpack进行检查，它将为文件类型使用适当的加载程序，在您的情况下，它是一个图像，因此它将使用文件加载程序，然后，它将移交其处理文件路径解析的责任

例如，如果执行

console.log（imageOne）

操作，它将

log

根据您在Webpack配置文件中指定的公共文件路径，为您的图像创建一个路径

另一方面，

将按原样打印，因为它写在JSX代码中，不会解析公用文件夹的实际路径

---

因此，您应该使用第一种方法（导入文件）来解析文件/图像路径。

首先，在

中。我添加了扩展名，我不工作。您设置的路径不是相对于“您的文件”，而是相对于“页面，一旦加载到浏览器中”。将您的图像放入静态资产目录（如

/public/images

），让您的服务器以正常方式服务这些图像（例如，告诉它

public

是您的静态资产目录），然后使用

src=“/images/some/sub/path/your image.ext”

指向该位置。

<img src="https://localhost:3000/sample-image.png" alt="sample-image" />

import sampleImage from '..[pathToAssets]/assets/imgs/sample-image';

~~~

<img src={sampleImage} alt="sample-image" />