Блог

Я пытаюсь отобразить изображение, полученное из mongodb, но я продолжаю получать ERR_INVALID_URL:http://prntscr.com/tzyqtd

В mongodb оно определяется как:

 coverImage: {
  type: Buffer,
},
  

В node я считываю изображение с помощью fs:

 const img = fs.readFileSync(
  path.resolve(__dirname, "../../images/img/grippers/gripper1.png"),
  { encoding: "base64" }
);
  

Затем я сохраняю его в mongodb, просто вводя это img в coverImage поле.

На моей интерфейсной стороне, когда я делаю запрос, я получаю объект с изображением в нем:

 const retrievedConfig = await axios.get(
  `http://localhost:3000/config/one/ROBOT_1`
);

console.log(retrievedConfig.data.Configs[0].Pallet.coverImage);
  

Таким образом, это выводит изображение, и изображение содержит два поля, {type: Buffer, data: Array[3750]}

Затем, когда я пытаюсь его отобразить:

 <img src={`data:image/png;charset=utf-8;base64,${img.data.toString("base64")}`}/>
  

Это выдает мне ERR_INVALID_URL ошибку.

Теперь, одна вещь, которую я заметил, это то, что даже с toString("base64") я не думаю, что он действительно преобразуется в base64 по какой-то причине, потому что он все еще в 8-битных числах (от 0 до 255). http://prntscr.com/tzysh5

Но когда я читаю его с помощью fs на серверной части, оно находится в base64 http://prntscr.com/tzysrz (это сразу после fs.read и перед сохранением в базе данных)

EDIT: Я попытался использовать btoa функцию во внешнем интерфейсе, и она действительно преобразовала ее в base64 (однако я понятия не имею, почему другой способ не сработал, у меня точно такой же код в другом приложении, работающем без btoa и отображаемых изображений), но даже после преобразования оно все еще не отображало изображение (просто показывало сломанное изображение http://prntscr.com/tzyw1m ), но ошибок нет.

Недавно я столкнулся с аналогичной проблемой — у меня получилось вручную преобразовать данные из Uint8Array в base64:

 function convertBufferToBase64(buffer) {
    let binaryStr = '';
    const byteArray = new Uint8Array(buffer);
    for (let i = 0; i < byteArray.byteLength; i  ) {
      binaryStr  = String.fromCharCode(bytes[i]);
    }
    return btoa(binary);
  }
  

Используйте его следующим образом:

 <img src={`data:image/png;charset=utf-8;base64,${convertBufferToBase64(img.data)}`}/>
  

Редактировать:

Поскольку вы уже читаете изображение, используя { encoding: "base64" } опцию, не должно быть необходимости конвертировать между буферами. Изменение типа данных mongoose из coverImage на String и использование его значения во внешнем интерфейсе должно устранить проблему.