-1

I am working on decentragram. This was working fine a few days ago but now image not load anymore. Giving error as bafybeieq6nyhu7ilorb7dxepo6sexab6oqigkjhzc62dxio6x5xaurge7u.ipfs.infura-ipfs.io/:1 GET https://bafybeieq6nyhu7ilorb7dxepo6sexab6oqigkjhzc62dxio6x5xaurge7u.ipfs.infura-ipfs.io/ net::ERR_NAME_NOT_RESOLVED

This is how I Displayed image in main.js

 <ul id="imageList" className="list-group list-group-flush">
                  <li className="list-group-item">
                    <p className="text-center"><img src={ 'https://ipfs.infura.io/ipfs/${image.hash}' } style={{ maxWidth: '420px'}}/></p>
                    <p>{image.description}</p>
                  </li>

and in App.js

const ipfsClient = require('ipfs-http-client')
const ipfs = ipfsClient({ host: 'ipfs.infura.io', port: 5001, protocol: 'https' }) // leaving out the arguments will default to these values
Mikko Ohtamaa
  • 82,057
  • 50
  • 264
  • 435
Jnilj
  • 51
  • 5

2 Answers2

1

Actually, It worked after I replaced the url with this

<p className="text-center"><img src={`https://gateway.ipfs.io/ipfs/${image.hash}`} style={{ maxWidth: '420px'}}/></p>
Jnilj
  • 51
  • 5
0

in JavaScript template should can be used with ` ${var_name}` so if we use like '${var_name}' or "${var_name}" then it will be read ${var_name} as string hardcoded. so you should use

<p className="text-center"><img src{`https://ipfs.infura.io/ipfs/${image.hash}` } style={{ maxWidth: '420px'}}/></p>

then you will be able to get the value of the variable
ref: Template Literals
Haseeb Ullah
  • 64
  • 7