在 react-native 中如何从服务器渲染图像（使用 node、express、multer 和 mongoDB）答案

【问题标题】：in react-native how to render an image from server (with node, express, multer and mongoDB)在 react-native 中如何从服务器渲染图像（使用 node、express、multer 和 mongoDB）
【发布时间】：2022-12-10 12:30:03
【问题描述】：

我使用 multer 成功地将我的 react-native App 中的图像存储到我的 /public 文件夹中，然后将名称和 uri 存储到 mongoDB 中。但我一直在尝试将图像渲染回我的应用程序。

如何将 server-image-url 转换为前端的可渲染图像？

这是我从 getProfileImage 得到的响应：

Object {
  "res": Object {
    "image": "public\\9180658ed9d83f98e4f20ed59906b0e49b74c2dd.jpeg",
    "name": "9180658ed9d83f98e4f20ed59906b0e49b74c2dd.jpeg",
    "status": "success",
  },
}

这是我存储/检索图像的后端：

exports.uploadImage = async (req, res) => {
  const userId = req.body.userId
  const reqFiles = req.file

  try {
    const user = await User.findByIdAndUpdate(
      userId,
      {
        image: {
          public_id: nanoid(5),
          uri: reqFiles.path,
          name: reqFiles.filename,
        },
      },
      { new: true }
    )
    console.log('IMAGE ADDED TO DB-USER------> ', user)
    return res.json({
      _id: user._id,
      name: user.name,
      email: user.email,
      image: user.image,
    })
  } catch (error) {
    res.json({
      error,
    })
  }
}

exports.serveImage = async (req, res) => {
  const userId = req.body.userId
  try {
    const imageOnServer = await User.findById(userId)
    console.log({ imageOnServer })
    // res.sendFile(
    //   path.join(
    //     __dirname,
    //     '../public/4c1a69b2ec1cded57e9668af94c909fb68957387.jpeg'
    //   )
    // )
    res.status(200).json({
      status: 'success',
      image: imageOnServer.image.uri,
      name: imageOnServer.image.name,
    })
  } catch (error) {
    res.json({
      status: 'Failed to load image',
      error,
    })
  }
}

这是我的多重配置：

const multerStorage = multer.diskStorage({
 
  destination: (req, file, cb) => {
    cb(null, 'public')
  },
  filename: (req, file, cb) => {
    const name = file.originalname.split('.')

    let fName =
      crypto.randomBytes(20).toString('hex') + '.' + name[name.length - 1]

    cb(null, fName)
  },
})

const multerFilter = (req, file, cb) => {
  const restrictedExts = ['jfif']
  const ext = file.originalname.split('.').pop()

  if (restrictedExts.indexOf(ext) !== -1) {
    return cb(null, false)
  }

  switch (file.mimetype) {
    case 'image/jpeg':
      break
    case 'image/jpg':
      break
    case 'image/png':
      break
    default:
      cb(null, false)
      break
  }

  cb(null, true)
}

const upload = multer({
  storage: multerStorage,
  fileFilter: multerFilter,
})

谁能看到缺少的东西？谢谢！

【问题讨论】：

标签： mongodb react-native express multer

【解决方案1】：

如果您有图像的 URL（从您的问题中我看到您有 public\9180658ed9d83f98e4f20ed59906b0e49b74c2dd.jpeg），我建议您使用 https://github.com/DylanVann/react-native-fast-image 组件。它具有缓存设置并且运行速度非常快。

import FastImage from 'react-native-fast-image'

const YourImage = () => (
    <FastImage
        style={{ width: 200, height: 200 }}
        source={{
            uri: res.image,
            priority: FastImage.priority.normal,
        }}
        resizeMode={FastImage.resizeMode.contain}
    />
)

【讨论】：