Javascript 从公用文件夹导入图像

我试图从我的公共目录中获取静态图像，但找不到。我没有使用CRA，所以可能是我缺少的一些网页配置。使用文件加载器模块并导入映像可以在开发模式下工作，但不适用于我的生产服务器规范

我的项目结构：

\public
   \static
      \images
         image.png
\src
   \component
      component.js
...
package.json
webpack.common.js
webpack.dev.js
webpack.prod.js

在component.js上，我想在static/images文件夹中获取image.jpg，如下所示：

  <img src='/static/images/image.png'></img>

import React from 'react'

var path = process.env.PUBLIC_URL;
var image = "/img/static/images/image.png";

和开发版本：

module.exports = merge(common, {
    mode: 'development',
    devServer: {
        host: 'localhost',
        port: 3000,
        open: true,
        historyApiFallback: true,
        publicPath: "/",
    }
})

---

提前谢谢。

我不确定这是否有帮助，但我想试试

尝试将公共路径添加到dist文件夹，也可以这样做

output: {
        path: path.resolve(__dirname, "/dist"),
        filename: "[name].js",
        publicPath: "/dist/"
    },

---

您使用的是

文件加载器

作为网页包插件，它不能“将

public

的目录结构镜像到dist”。您可以在此处找到该插件的文档：

基本上，插件所做的是，如果您导入一个图像文件（实际上是通过编程方式导入的，而不仅仅是使用对其路径的字符串引用），该文件将复制到dist目录，可能会重命名，并且在编译的源代码中插入正确的文件名

因此，在您的情况下，如果您想使用

文件加载器

解决您的问题，您可以像这样引用图像文件

// Relative path to image file from js file
import imageFile from './assets/image.png';

// ...
const component = props => <img src={imageFile}></img>;

//从js文件到图像文件的相对路径
从“./assets/image.png”导入图像文件；
// ...
const component=props=>；

如果您想使用实际上只是将

公共

-目录镜像到dist目录的方法，则需要使用额外的webpack插件（例如）

---

顺便说一下，我假设它在开发模式下工作，因为您将“/”设置为公共路径，所以开发服务器也只服务于根目录中的所有内容。这与将文件复制到dist是不同的，但是，正如您试图实现的那样。

我假设您希望多次显示这样的图像。在这种情况下，在jsx代码中持续编写类似“%PUBLIC_URL%/img/static/images/image.png”或{process.env.PUBLIC_URL+'/img/static/images/image.png'}这样的内容两次、三次或更多次是很烦人的。基本上，如果你的应用程序根在src文件夹中，没有插件就不可能从公共文件夹导入图像。然而，我确实为自己找到了一个解决方案，事实上非常简单。是这样的：

  <img src='/static/images/image.png'></img>

import React from 'react'

var path = process.env.PUBLIC_URL;
var image = "/img/static/images/image.png";

然后，在jsx代码中：

<img src={path + image}/>

---

它对我有用，希望这对任何人都有帮助！：D

有两件事：您将“src”设置为“/static/image.png”，但根据您的项目结构，它应该是“/static/images/image.png”。那是打字错误吗？运行生产生成后，您的“dist/”文件夹是什么样子的？它包括那个图像文件吗？确实是个打字错误。在production dist/fold中，仅当我通过loader webpack插件导入时，图像才会出现，这对我来说不是一个好的选择。使用文件加载程序导入工作正常，但我需要直接从公共路径访问源代码，如。但是开发服务器找不到源代码。这是一个大问题。复制网页包插件解决了我的问题，但不知道为什么。无论如何，谢谢你。