Failed to load images in npm package development

Asked

Viewed 27 times

-1

I was developing an npm package and came across the following error.
My current project structure is as follows:.
inserir a descrição da imagem aqui

inside my Assets folder has some images that I am needing to use for the development of my package, basically I will take these images and return a Base64 of them. The class that returns Base64 from the image is the Base64.png file that is inside utils.
Base64.js


export default class Convert {
    constructor(){
    }

    _getBase64(b){
       return b.toString('base64');
    }

     _convertImageToBase64(b){

        //let path = b == 'Elo' ? '../assets/bandeira_elo.png' : b == 'MasterCard' ? '../assets/bandeira_master_card.png' : '../assets/bandeira_visa.png';
    
        if(fileSystem.statSync(String('../assets/bandeira_master_card.png')).isFile()){
            return Promise.resolve(this._getBase64(fileSystem.readFileSync(path.resolve('../assets/bandeira_master_card.png')).toString('base64'))); 
        }else{
            return {
                success: false,
                error: 'Algo de errado aconteceu', 
            }
        }
    }
}

If I enter the terminal into the utils folder and give a Node Base64.js, it works normally and returns the Base64 from the image.
However when I import it to be used inside the Mainptbr.js file and run the same function generates the following error:

  <rejected> Error: ENOENT: no such file or directory, stat '../assets/bandeira_master_card.png'
      at Object.statSync (node:fs:1142:3)
      at Convert._convertImageToBase64 (/Users/user/Documents/Projects/cartao/dist/utils/Base64.js:15:23)
      at MainPTBR._checkBandeiraToImage (/Users/user/Documents/Projects/cartao/dist/PT-BR/MainPtBr.js:200:49)
      at _checkBandeiraToImage (/Users/user/Documents/Projects/cartao/index.js:30:27)
      at Object.<anonymous> (/Users/user/Documents/Projects/cartao/index.js:44:13)
      at Module._compile (node:internal/modules/cjs/loader:1092:14)
      at loader (/Users/user/Documents/Projects/cartao/node_modules/babel-register/lib/node.js:144:5)
      at Object.require.extensions.<computed> [as .js] (/Users/user/Documents/Projects/cartao/node_modules/babel-register/lib/node.js:154:7)
      at Module.load (node:internal/modules/cjs/loader:972:32)
      at Function.Module._load (node:internal/modules/cjs/loader:813:14) {
    errno: -2,
    syscall: 'stat',
    code: 'ENOENT',
    path: '../assets/bandeira_master_card.png'
  }
}
node:internal/process/promises:245
          triggerUncaughtException(err, true /* fromPromise */);
          ^

Error: ENOENT: no such file or directory, stat '../assets/bandeira_master_card.png'
    at Object.statSync (node:fs:1142:3)
    at Convert._convertImageToBase64 (/Users/user/Documents/Projects/cartao/dist/utils/Base64.js:15:23)
    at MainPTBR._checkBandeiraToImage (/Users/user/Documents/Projects/cartao/dist/PT-BR/MainPtBr.js:200:49)
    at _checkBandeiraToImage (/Users/user/Documents/Projects/cartao/index.js:30:27)
    at Object.<anonymous> (/Users/user/Documents/Projects/cartao/index.js:44:13)
    at Module._compile (node:internal/modules/cjs/loader:1092:14)
    at loader (/Users/user/Documents/Projects/cartao/node_modules/babel-register/lib/node.js:144:5)
    at Object.require.extensions.<computed> [as .js] (/Users/user/Documents/Projects/cartao/node_modules/babel-register/lib/node.js:154:7)
    at Module.load (node:internal/modules/cjs/loader:972:32)
    at Function.Module._load (node:internal/modules/cjs/loader:813:14) {
  errno: -2,
  syscall: 'stat',
  code: 'ENOENT',
  path: '../assets/bandeira_master_card.png'
}

I believe that to use files within my lib I need to add something in package.json, both to work in my test environment and when I publish, to work on other computers.

node.js

  • This is probably because you are using relative path. How you are using ../ or ./ to resolve the path, depending on where it runs, the mounted directory will be different. Perhaps it is the case to capture the "base directory" in a variable and mount the file path concatenating the same.

1 answer

0

In the path of your image, use the function path.normalize:

const path = require('path');

...

if (fileSystem.statSync(path.normalize('../assets/bandeira_master_card.png')).isFile()) {

...

Browser other questions tagged node.js

You are not signed in. Login or sign up in order to post.