提问者:小点点

如何在React中显示作为文件下载的图像&保存在服务器上的文件夹中,文件路径存储在数据库中?


react.js,node.js/express.js和amp;PostgreSQL。

我收集了一本书的图像,下载并将其存储在带有node.js的图像文件夹中的文件中,并将文件路径存储在我的postgreSQL数据库中,我希望在我的React前端的/code>标记中获取并显示图像。

虽然我可以在devtool-console中console.log Image对象,甚至可以用Image-Object作为JSON响应发出成功的邮递员请求,但我通过API从数据库中获取的图像并没有显示出来。此外,如果我转到localhost:3001/image-193x278.png,我甚至可以得到显示的图像。我的/code>标记甚至在devtools中显示了正确的Img src属性(imagesimage-193x278.png)

在devtool-console中,我得到以下错误:gethttp:/localhost:3002/images/image-193x278.png[HTTP/1.1 404找不到0ms]

(注意:我的前端在localhost 3002上运行,而我的服务器&;前端与3001上的代理同时运行,但这不是问题所在)

const [image, setImage] = useState([]);

  useEffect(() => {

    async function fetchData() {
      const response = await fetch('http://localhost:3001/test', {
        method: 'GET',
        headers: {
          Accept: 'application/json',
          'Content-Type': 'application/json',
        }
      })
      const data = await response.json();
      console.log(data);
      setImage(data);
    }
    fetchData();

  }, []);

我尝试用两种不同的方式显示它:

<img className={css(styles.Image)} src={image.test_images} alt="" />

{image.map((img) => 
<img className={css(styles.Image)} src={img.test_images} alt="" />)}

app.get('/test', async (req, res) => {
    try {
        const image = await testdb.query('SELECT * FROM test_table');
        res.json(image.rows);
    } catch (err) {
        console.error(err);
    }
})

我提供了一个快速静态文件

app.use(express.static('images'));

我甚至尝试了另外两种变体以防万一

app.get('/test', express.static(__dirname + '../images'));
app.use(express.static('../images'));

还是没有成功。我希望我能尽可能地让别人理解我自己,我会非常感谢每一个给予我帮助的人。


共1个答案

匿名用户

问题出在静态文件夹上。静态文件将在中提供。

如果您想让它在路径下工作,那么您可以将路径添加到静态声明中,如下所示

app.use('/images', express.static('images'))

然后可以点击

您可以在这里找到文档:https://expressjs.com/en/starter/static-files.html