Nodejs 为什么本地的图片就显示不出来。

Nodejs 为什么本地的图片就显示不出来。

写了一个显示图片的小程序，可为什么电脑本地的图片就显示不出来，而网上的图片能够正常显示？ 下面是代码，testimg2能正常显示，testimg1就显示不出来，这两个除了路径不同，其他地方使用都是完全一样的。 var photos = []; photos.push({ name:‘testimg1’, path:‘C:/Users/Administrator/Desktop/nodejs/chapter8/photo/routes/test.png’ }); photos.push({ name:‘testimg2’, path:‘http://b.hiphotos.baidu.com/image/pic/item/3812b31bb051f819e7439e54d8b44aed2e73e74e.jpg’ }); exports.list=function(req,res){ res.render(‘photos’,{ title:‘Photos’, photos:photos }); };


6 回复

标题：Node.js 为什么本地的图片无法显示？

内容：

在Node.js中，如果你发现本地图片无法显示，但网络图片可以正常显示，这通常是因为本地文件路径不正确或服务器没有正确处理静态资源。以下是一些常见的原因及解决方法。

原因分析

  1. 路径问题：确保本地图片的路径是正确的，并且与实际文件位置匹配。
  2. 静态资源处理：需要配置Node.js应用以正确处理静态文件（如图片）。

示例代码

假设你正在使用Express框架，你需要配置一个静态文件夹来提供图片。

const express = require('express');
const path = require('path');
const app = express();
const port = 3000;

// 配置静态文件夹
app.use('/static', express.static(path.join(__dirname, 'public')));

// 处理图片展示的路由
app.get('/photos', (req, res) => {
    const photos = [
        { name: 'testimg1', path: '/static/test.png' },
        { name: 'testimg2', path: 'http://b.hiphotos.baidu.com/image/pic/item/3812b31bb051f819e7439e54d8b44aed2e73e74e.jpg' }
    ];
    res.render('photos', { title: 'Photos', photos });
});

app.listen(port, () => {
    console.log(`Server is running on http://localhost:${port}`);
});

解释

  • 静态文件夹配置：app.use('/static', express.static(path.join(__dirname, 'public')));

    • 这行代码告诉Express在URL路径为/static时，查找public文件夹下的静态文件。

  • 图片路径：在数组中的图片路径应指向配置的静态文件夹，例如/static/test.png。

文件结构

确保你的项目文件夹结构如下：

project-root
│
├── public
│   └── test.png
│
├── views
│   └── photos.ejs
│
├── app.js
└── package.json

模板渲染

确保你的模板文件（如photos.ejs）正确引用了图片路径。

<!DOCTYPE html>
<html>
<head>
    <title><%= title %></title>
</head>
<body>
    <% photos.forEach(function(photo) { %>
        <img src="<%= photo.path %>" alt="<%= photo.name %>">
    <% }) %>
</body>
</html>

通过以上步骤，你应该能够正确地显示本地图片。如果仍然有问题，请检查控制台错误信息，确保路径和配置都正确无误。


楼主把代码格式化一下吧…

用相对路径试试

用相对 web root 的路径试试

其实在html的img元素中，src属性是要请求服务器的，你的服务器没有处理，就直接给了一个c:/XX/XX/x.png。 这就是你问题的原因。基础很重要！

根据你的描述，问题可能出在本地图片的路径处理上。在Node.js中，如果你需要读取本地文件并在网页上展示，你需要确保路径正确，并且能够通过HTTP请求访问这些文件。

以下是改进后的示例代码：

步骤1：创建一个静态文件目录

首先，将你的图片放在一个静态文件目录中，比如 public/images。

步骤2：配置Express以提供静态文件

在你的Express应用中添加以下代码来提供静态文件服务：

const express = require('express');
const path = require('path');

const app = express();
app.use(express.static(path.join(__dirname, 'public')));

// 其他路由定义...

步骤3：修改照片路径

修改照片路径为相对路径或绝对路径，但确保路径正确指向 public/images 目录下的图片。

var photos = [];
photos.push({
    name: 'testimg1',
    path: '/images/test.png' // 假设test.png位于public/images目录下
});
photos.push({
    name: 'testimg2',
    path: 'http://b.hiphotos.baidu.com/image/pic/item/3812b31bb051f819e7439e54d8b44aed2e73e74e.jpg'
});

exports.list = function (req, res) {
    res.render('photos', {
        title: 'Photos',
        photos: photos
    });
};

步骤4：渲染视图

确保你的视图（如EJS）正确引用了图片路径。例如，在EJS模板中：

<!DOCTYPE html>
<html>
<head>
    <title><%= title %></title>
</head>
<body>
    <h1><%= title %></h1>
    <% photos.forEach(function(photo) { %>
        <img src="<%= photo.path %>" alt="<%= photo.name %>">
    <% }); %>
</body>
</html>

通过以上步骤，你应该可以正确地显示本地图片。关键在于确保路径正确，并且使用静态文件服务器来提供这些文件。

回到顶部