图片显示问题

[3290323316]

前端用vue做的，后端用node写的，怎么显示从后端获取的图片？前端和后端运行的端口不一样。

[wanghao]

前端只需要知道图片地址即可，无论这个地址是什么端口，都是可以显示的，这里不存在冲突问题。

也就是我们把一个图片地址交给 标签的 src 属性就行了， 怎么显示这个图片是浏览器做的事情，咱们无需担心。

图片地址可以是静态地址，就是直接通过 web 服务器就能访问到图片。这个地址也可以是由后端服务动态生成的，就是后端服务可以根据请求，读取图片文件内容，再把它响应给前端应用。

[3290323316]

这是我前端拿到后端返回的数据：

但是我下面的图片显示不出来，麻烦帮忙看看。前端代码：

[wanghao]

我看您的这个数据里有 img_url 这个属性，它的值像是一个图片地址，但是这个地址里并没有包含主机名，这个主机名应该是你的服务端的主机名，也就是你的服务端接口用的那个主机名。也就是如果您想在前端显示图片，需要自己拼接出图片地址，也就是服务端应用的基本地址 + img_url 这个属性的值。

[3290323316]

拼接出来，然后前端好像就显示需要跨域了，如图：

后端的代码如下：

[wanghao]

这个图片服务是谁提供的？如果完全是您自己的服务端提供的，你需要单独创建一个图像服务接口来响应对图片文件的请求，记得做出响应的时候，需要设置正确的 Content-Type。

下面是文件服务接口的处理器方法的参考：

https://github.com/ninghao/xb2-node/blob/master/src/file/file.controller.ts

/**
 * 文件服务
 */
export const serve = async (
  request: Request,
  response: Response,
  next: NextFunction,
) => {
  // 从地址参数里得到文件 ID
  const { fileId } = request.params;

  try {
    // 查找文件信息
    const file = await findFileById(parseInt(fileId, 10));

    // 要提供的图像尺寸
    const { size } = request.query;

    // 文件名与目录
    let filename = file.filename;
    let root = 'uploads';
    let resized = 'resized';

    if (size) {
      // 可用的图像尺寸
      const imageSizes = ['large', 'medium', 'thumbnail'];

      // 检查文件尺寸是否可用
      if (!imageSizes.some(item => item == size)) {
        throw new Error('FILE_NOT_FOUND');
      }

      // 检查文件是否存在
      const fileExist = fs.existsSync(
        path.join(root, resized, `${filename}-${size}`),
      );

      // 设置文件名与目录
      if (fileExist) {
        filename = `${filename}-${size}`;
        root = path.join(root, resized);
      }
    }

    // 做出响应
    response.sendFile(filename, {
      root,
      headers: {
        'Content-Type': file.mimetype,
      },
    });
  } catch (error) {
    next(error);
  }
};

[3290323316]

自己用node写的接口，前端是通过element的upload 组件上传图片，图片的接口要单独写吗？我这边写的是一个相当于发布文章的接口，其中的参数就包括了文章标题，封面图片，内容等。

----------
        //发布文章路由处理函数
exports.addarticleshandler = async (req,res) =>{
    console.log(req.file.filename)
    console.log(req.file)
    // console.log(req.file.fieldname)
    var formatDateTime = function (date) {  
        var date= new Date(Date.parse(date));
                    var y = date.getFullYear();  
                    var m = date.getMonth() + 1;  
                    m = m < 10 ? ('0' + m) : m;  
                    var d = date.getDate();  
                    d = d < 10 ? ('0' + d) : d;  
                    var h = date.getHours();  
                    h=h < 10 ? ('0' + h) : h;  
                    var minute = date.getMinutes();  
                    minute = minute < 10 ? ('0' + minute) : minute;  
                    var second=date.getSeconds();  
                    second=second < 10 ? ('0' + second) : second;  
                    return y + '-' + m + '-' + d+' '+h+':'+minute+':'+second;  
                };  
    
    //手动判断是否上传了文章封面
    if(!req.file || req.file.fieldname !== 'cover_img') return res.cc('文章封面是必选参数')
    const results = await articles.create({
        title:req.body.title,
        content:req.body.content,
        cover_img:path.join('/uploads',req.file.fieldname),
        //文章分别时间
        pub_date:formatDateTime(Date()),
        //文章的作者id
        author_id:req.user.id,
        cate_id:req.body.cate_id,
        state:req.body.state

    })
    const img_url = `http://localhost:88/upload/${req.file.filename}`
    res.cc({data:req.file,img_url},0)

[wanghao]

http://localhost:88/upload/${req.file.filename}

上面这个图片地址如果没有经过配置是无法显示图片的。应该可以通过配置 node 服务的静态资源访问到某个目录里的文件，或者可以像我上面给出的那样，定义一个图像文件服务接口。再或者，你可以通过一个 web 服务（比如 nginx 配置的 web 服务），指向这个图片目录，然后使用 web 服务的图片地址 。

[3290323316]

找到方法了，要这样设置
//允许托管静态资源可跨域
let options = {
setHeaders: function (res, path, stat) {
res.set('Access-Control-Allow-Origin', '*')
}
}

[3290323316]

`//静态托管

//允许托管静态资源可跨域
let options = {
setHeaders: function (res, path, stat) {
res.set('Access-Control-Allow-Origin', '*')
}
}

app.use(express.static(path.join(__dirname,'./uploads'),options));`