NFT image not showing

[Aamirusmani1552]

I created all three types of NFT's that were shown in the course. All of my tests are working perfectly. I am able to mint them. But this is what i am getting when i am checking it on rinkeby testnet opensea.

I don't know why images are not showing. As you can see my random IPFS nft is working perfectly but other two are just not visible.

my code for basic nft

` // SPDX-License-Identifier:MIT
pragma solidity ^0.8.0;

 import "@openzeppelin/contracts/token/ERC721/ERC721.sol";

contract BasicPugNft is ERC721 {
uint256 private s_tokenCounter;
string private constant TOKEN_URI = "ipfs://QmbUDB5hcuaEcdziurMCHykFiNxhRTeMZVQxUUkXvTpui8";

constructor() ERC721("Dogie", "PUG") {
    s_tokenCounter = 0;
}

// mint the nft
function mintNFT() public returns (uint256) {
    _safeMint(msg.sender, s_tokenCounter);
    s_tokenCounter = s_tokenCounter + 1;
    return s_tokenCounter;
}

// getter functions
function getTokenCounter() public view returns (uint256) {
    return s_tokenCounter;
}

function tokenURI(uint256 tokenId) public pure override returns (string memory) {
    return TOKEN_URI;
}

}
`

i am able to check for my token uri's on deployed contracts and everything looks fine to me. I used the same metadata used in the video. I don't know what is wrong. here

Metadata i used

{
   "name": "PUG",
  "description": "An adorable PUG pup!",
  "Image": "ipfs://QmSdzraBgn3kV1SEKP8exknLoagjRDGefMsN5DyHNQ1Xbb",
  "attributes": [
    {
      "trait_type": "cuteness",
      "value": 100
    }
  ]

}

[dibakarsutradhar]

Your Metadata's image should not be assigned to any specific string or ipfs address. The image should be assigned to an empty string instead.

Your metadata should look like this -

{
  name: '',
  description: '',
  image: '',
  attributes: [
    {
      trait_type: 'Cuteness',
      value: 100,
    },
  ],
}

Also, the TOKEN_URI in the BasicNFT contract looks different. The one I've in my contract is like this -

string public constant TOKEN_URI =
        "ipfs://bafybeig37ioir76s7mg5oobetncojcm3c3hxasyd4rvid4jqhy4gkaheg4/?filename=0-PUG.json";

And check with your DynamicSvgNft contracts SVG attributes and encodings, looks like this contract is also having an issue showing the images.

Hope this helps.

[Aamirusmani1552]

first of all thank u for the answer.
But i am confused now. Why image attribute should be empty string? How would it a marketplace render the image of the nft?

---

string public constant TOKEN_URI = "ipfs://bafybeig37ioir76s7mg5oobetncojcm3c3hxasyd4rvid4jqhy4gkaheg4/?filename=0-PUG.json";

Yes also used this Token URI but didn't work for me. So i created my own and uploaded it to pinata.
But this is also not working.
can you share your code for both basic and dynamic nft @dibakarsutradhar

[dibakarsutradhar]

@Aamirusmani1552 Metadata template should be empty as your code will use this template to generate its very own metadata, and all the details including the 'image' attribute will be populated dynamically. So it is a good practice to keep your metadata template empty, otherwise, it will interfere with the newly generated metadata.

here's my BasicNFT contract -

// SPDX-License-Identifier: SEE LICENSE IN LICENSE
pragma solidity ^0.8.7;

import "@openzeppelin/contracts/token/ERC721/ERC721.sol";

contract BasicNFT is ERC721 {
    string public constant TOKEN_URI =
        "ipfs://bafybeig37ioir76s7mg5oobetncojcm3c3hxasyd4rvid4jqhy4gkaheg4/?filename=0-PUG.json";
    uint256 private s_tokenCounter;

    constructor() ERC721("Doggie", "DOG") {
        s_tokenCounter = 0;
    }

    function mintNft() public returns (uint256) {
        _safeMint(msg.sender, s_tokenCounter);
        s_tokenCounter = s_tokenCounter + 1;
        return s_tokenCounter;
    }

    function tokenURI(
        uint256 /*tokenId*/
    ) public pure override returns (string memory) {
        return TOKEN_URI;
    }

    function getTokenCounter() public view returns (uint256) {
        return s_tokenCounter;
    }
}

Here's my DynamicSvgNft contract -

// SPDX-License-Identifier: MIT
pragma solidity ^0.8.7;

import "@openzeppelin/contracts/access/Ownable.sol";
import "@openzeppelin/contracts/token/ERC721/ERC721.sol";
import "@chainlink/contracts/src/v0.8/interfaces/AggregatorV3Interface.sol";
import "base64-sol/base64.sol";

contract DynamicSvgNft is ERC721, Ownable {
    uint256 private s_tokenCounter;
    string private i_lowImageURI;
    string private i_highImageURI;

    mapping(uint256 => int256) public s_tokenIdToHighValue;
    AggregatorV3Interface internal immutable i_priceFeed;

    event CreateNFT(uint256 indexed tokenId, int256 highValue);

    constructor(
        address priceFeedAddress,
        string memory lowSvg,
        string memory highSvg
    ) ERC721("Dynamic SVG NFT", "DSN") {
        s_tokenCounter = 0;
        i_lowImageURI = svgToImageURI(lowSvg);
        i_highImageURI = svgToImageURI(highSvg);
        i_priceFeed = AggregatorV3Interface(priceFeedAddress);
    }

    function svgToImageURI(string memory svg)
        public
        pure
        returns (string memory)
    {
        string memory baseURL = "data:image/svg+xml;base64,";
        string memory svgBase64Encoded = Base64.encode(
            bytes(string(abi.encodePacked(svg)))
        );
        return string(abi.encodePacked(baseURL, svgBase64Encoded));
    }

    function mintNft(int256 highValue) public {
        s_tokenIdToHighValue[s_tokenCounter] = highValue;
        emit CreateNFT(s_tokenCounter, highValue);
        _safeMint(msg.sender, s_tokenCounter);
        s_tokenCounter = s_tokenCounter + 1;
    }

    function _baseURI() internal pure override returns (string memory) {
        return "data:application/json;base64,";
    }

    function tokenURI(uint256 tokenId)
        public
        view
        virtual
        override
        returns (string memory)
    {
        require(
            _exists(tokenId),
            "ERC721Metadata: URI Query for nonexistent token"
        );
        // string memory imageURI = "hi";

        (, int256 price, , , ) = i_priceFeed.latestRoundData();
        string memory imageURI = i_lowImageURI;
        if (price >= s_tokenIdToHighValue[tokenId]) {
            imageURI = i_highImageURI;
        }

        return
            string(
                abi.encodePacked(
                    _baseURI(),
                    Base64.encode(
                        bytes(
                            abi.encodePacked(
                                '{"name": "',
                                name(),
                                '", "description": "An NFT that changes based on the Chainlink Feed", ',
                                '"attributes" : [{"trait_type": "coolness", "value": 100}], "image": "',
                                imageURI,
                                '"}'
                            )
                        )
                    )
                )
            );
    }

    function getLowSVG() public view returns (string memory) {
        return i_lowImageURI;
    }

    function getHighSVG() public view returns (string memory) {
        return i_highImageURI;
    }

    function getPriceFeed() public view returns (AggregatorV3Interface) {
        return i_priceFeed;
    }

    function getTokenCounter() public view returns (uint256) {
        return s_tokenCounter;
    }
}