如何在reactjs中使用图像

Question

这是我的代码。我在"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;

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

Answer 1

在ReactJs应用程序中导入图像有一些常见的方法。对于镜像分离服务器的情况，调用镜像非常简单，如下所示：

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

但如果图片是为应用程序而不是向用户展示的，比如UI设计的图片，有两种常见的方式：

1. 使用copy-webpack-plugin并将所有照片放在一个文件夹中，然后在构建和服务之后，您应该服务于此文件夹，然后您可以通过您的链接调用它们(例如:假设我们在localhost:3000):

上运行项目

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

1. 就像你的第一个把戏一样，把所有的照片放在一个文件夹里，然后把它们导入你需要的每个组件中，然后使用它：

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

~~~

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

我希望这个答案能帮助你。

Answer 2

这是不起作用的，因为<img src="../img/cool-img" alt="relativepath-img" />镜像源不是使用Webpack file-loader来解析的，当你对一个文件使用import语句时，它会首先被Webpack检查，然后它会为文件类型使用合适的加载器，在你的情况下，它是一个镜像，所以它会使用文件加载器，然后它会移交它的责任来处理你的文件路径的解析。

例如，如果执行console.log(imageOne)，它将根据您在Webpack配置文件中指定的公共文件路径，为您的镜像log一个路径。

另一方面，<img src="../img/cool-img" alt="relativepath-img" />将按原样打印，因为它是在JSX代码中编写的，它不会解析您的公共文件夹的真实路径。

所以你应该使用第一种方法(导入文件)来解析你的文件/图像路径。