Next.js Discord

Discord Forum

Trying to import SVGs but src is empty

Answered
skxtch posted this in #help-forum
Open in Discord
skxtchOP
import React from "react";
import Image from "next/image";

import tailwindIcon from '../images/icons/tailwindcss.svg';
import javascriptIcon from '../images/icons/javascript.svg';
import typescriptIcon from '../images/icons/typescript.svg';
import nextdotjsIcon from '../images/icons/nextdotjs.svg';

interface GitHubProject {
  name: string;
  url: string;
  icon?: string;
}

const projects: GitHubProject[] = [
  {
    name: "Project1",
    url: "url1",
    icon: tailwindIcon,
  },
  {
    name: "Project2",
    url: "url2",
    icon: javascriptIcon,
  },
  {
    name: "Project3",
    url: "url3",
    icon: typescriptIcon,
  },
  {
    name: "Project4",
    url: "url4",
    icon: nextdotjsIcon,
  },
];

and then i have 
<Image src={project.icon || ""} alt="" width={24} height={24}/>

But my SVGs do not render and these are the errors that show up in my console
Answered by Northeast Congo Lion
fix the colours of the SVG
View full answer

98 Replies

@Northeast Congo Lion can u try `project.icon.src` or `project.icon.url`?
skxtchOP
both dont exist on type "string"
Northeast Congo Lion
oh
i see
interface GitHubProject {
name: string;
url: string;
icon?: string;
}
icon is not of type string
it is of type StaticImport
please try that and see if it works with .src or .url
skxtchOP
ok i will
Northeast Congo Lion
interface GitHubProject {
  name: string;
  url: string;
  icon?: StaticImport;
}
Northeast Congo Lion
can u share full code please.
@Northeast Congo Lion can u share full code please.
skxtchOP
import React from "react";
import Image from "next/image";

import tailwindIcon from '../images/icons/tailwindcss.svg';
import javascriptIcon from '../images/icons/javascript.svg';
import typescriptIcon from '../images/icons/typescript.svg';
import nextdotjsIcon from '../images/icons/nextdotjs.svg';
import { StaticImport } from "next/dist/shared/lib/get-img-props";

interface GitHubProject {
  name: string;
  url: string;
  icon?: StaticImport;
}

const projects: GitHubProject[] = [
  {
    name: "Project1",
    url: "url1",
    icon: tailwindIcon,
  },
  {
    name: "Project2",
    url: "url2",
    icon: javascriptIcon,
  },
  {
    name: "Project3",
    url: "url3",
    icon: typescriptIcon,
  },
  {
    name: "Project4",
    url: "url4",
    icon: nextdotjsIcon,
  },
];

const GitHubProjectsGrid: React.FC = () => {
  return (
    <div className="scale-125 md:scale-100 text-center grid grid-cols-2 gap-4 mx-auto my-16">
      {projects.map((project, index) => (
        <div
          key={index}
          className="bg-black opacity-75 p-4 rounded-lg hover:opacity-100 -highlight transition ease-in-out duration-150">
          <div className="flex items-center justify-start">
            <Image src={project.icon.url || ""} alt="" width={24} height={24} />
            <a
              href={project.url}
              className="text-center text-xl font-bold ml-4">
              {project.name}
            </a>
          </div>
        </div>
      ))}
    </div>
  );
};

export default GitHubProjectsGrid;
Northeast Congo Lion
sorry @skxtch my bad
its StaticImageData
apologies!
try that instead
@Northeast Congo Lion its `StaticImageData`
skxtchOP
and then i do project.icon.url?
or .src whatever
@skxtch and then i do project.icon.url?
Northeast Congo Lion
try it with just project.icon first, i can't remember 100% with TS
interface GitHubProject {
  name: string;
  url: string;
  icon?: StaticImageData;
}


<Image src={project.icon} />
remove the || ""
@Northeast Congo Lion remove the ` || ""`
skxtchOP
doing that results in this error
Northeast Congo Lion
show code pls..
skxtchOP
<Image src={project.icon} alt={project.name} width={24} height={24}/>
Northeast Congo Lion
full code
pls
Also, before rendering the <Image />

check if icon is null
@Northeast Congo Lion full code
skxtchOP
import React from "react";
import Image from "next/image";
import { StaticImageData } from "next/dist/shared/lib/get-img-props";

import tailwindIcon from "../images/icons/tailwindcss.svg";
import javascriptIcon from "../images/icons/javascript.svg";
import typescriptIcon from "../images/icons/typescript.svg";
import nextdotjsIcon from "../images/icons/nextdotjs.svg";

interface GitHubProject {
  name: string;
  url: string;
  icon?: StaticImageData;
}

const projects: GitHubProject[] = [
  {
    name: "Project1",
    url: "url1",
    icon: tailwindIcon,
  },
  {
    name: "Project2",
    url: "url2",
    icon: javascriptIcon,
  },
  {
    name: "Project3",
    url: "url3",
    icon: typescriptIcon,
  },
  {
    name: "Project4",
    url: "url4",
    icon: nextdotjsIcon,
  },
];

const GitHubProjectsGrid: React.FC = () => {
  return (
    <div className="scale-125 md:scale-100 text-center grid grid-cols-2 gap-4 mx-auto my-16">
      {projects.map((project, index) => (
        <div
          key={index}
          className="bg-black opacity-75 p-4 rounded-lg hover:opacity-100 -highlight transition ease-in-out duration-150">
          <div className="flex items-center justify-start">
            {project.icon && (
              <Image
                src={project.icon}
                alt={project.name}
                width={24}
                height={24}
              />
            )}
            <a
              href={project.url}
              className="text-center text-xl font-bold ml-4">
              {project.name}
            </a>
          </div>
        </div>
      ))}
    </div>
  );
};

export default GitHubProjectsGrid;
Northeast Congo Lion
and it still doesn't work?
skxtchOP
nope
Northeast Congo Lion
console error?
skxtchOP
nothing
Northeast Congo Lion
console.log each project.icon
what do u get, null or object?
u should get something like this
skxtchOP
gimme a sec
Northeast Congo Lion
ight
right
so now try project.icon.src
if it still doesn't work, the issue is not with the Image component
also
i see u are using svg
Northeast Congo Lion
if u aren't getting a 404 in network tab
the image is loading.
can u double check ur css etc
maybe u can put site on vercel?
skxtchOP
i have my site hosted on
github pages for now
Northeast Congo Lion
pls can u push ur changes & share with me
so i can check myself
skxtchOP
alr gimme a sec
Northeast Congo Lion
what image isnt loading
i can't see anywhere for an image to be?
skxtchOP
its in /projects/
Northeast Congo Lion
can u screenshot
i only see this
skxtchOP
are you on
the live site
Northeast Congo Lion
yes
u didn't push live?
skxtchOP
i didnt push live i only pushed to dev
did you want me to push to live
Northeast Congo Lion
ill clone dev
dawg
ur images are working
😂
skxtchOP
are
Northeast Congo Lion
skxtchOP
you
Northeast Congo Lion
u just need to
Northeast Congo Lion
fix the colours of the SVG
Answer
Northeast Congo Lion
told u 😉
skxtchOP
:pain:
Northeast Congo Lion
it happens
if no console/network error with image
then it must be a css issue 🙂
little tip for future
skxtchOP
wait wdym by fix the colours wtf
is it an issue with the svg files themselves or styling
Northeast Congo Lion
i think the svg itself
skxtchOP
hold on
Northeast Congo Lion
if ursing svg, just paste the svg code in
2 options

1)paste svg code into jsx

or

2) fix svg themselves.
skxtchOP
alright thanks
i need to fix the svgs now
Northeast Congo Lion
ye
skxtchOP
thanks for the help man
Northeast Congo Lion
i added bg: #fff to svg and they show.
of course, always around
if u can, mark the solution you think to be the answer 🙂