reactjs 如何从react.js中react-app文件夹的外部文件夹调用图像

owfi6suc  于 2023-01-02  发布在  React
关注(0)|答案(1)|浏览(127)

我的图像存储在server文件夹中,我的react应用程序文件夹是food
enter image description here
我想调用服务器(服务器〉上传〉食物)文件夹中的图像到食物(食物〉源〉主页)。我使用了像**(../)**这样的反向路径,但它不起作用。
那么,如何在react中将图像从服务器文件夹调用到food文件夹
如何从react.js中react-app文件夹的外部文件夹调用图像

c9qzyr3d

c9qzyr3d1#

我假设,您必须从服务器文件夹中获取图像,这是您的express.js应用程序。
客户端从服务器下载的图像、CSS文件、JavaScript文件和其他文件称为静态文件。这些静态文件可以使用express framework获取,也可以不使用**express framework获取。
你可能有以下目录树:

server.js
package.json
package-lock.json
nodemodules
  | -- *
uploads
   -food
     | -- demoImage.png
public
  | -- index.html

使用Express框架:使用express框架,它内置的中间件函数**expression.static()**可以用来提供静态文件。

**文件名:**服务器. js

// Requiring module
const express = require('express');
 
// Creating express object
const app = express();
 
// Defining port number
const PORT = 3000;                 
 
// Function to serve all static files
// inside public directory.
app.use(express.static('public')); 
app.use('/images', express.static('images'));
 
// Server setup
app.listen(PORT, () => {
  console.log(`Running server on PORT ${PORT}...`);
})

运行程序的步骤:

1.快速安装:

npm install express

1.使用以下命令运行server.js文件:

node server.js

现在您可以从以下URL访问图像:

http://localhost:3000/images/demoImage.png

相关问题