Image not found in next.js

Working Environment
・ next.js
・ typescript
・ styled-components

I uploaded the image in the folder inside pages, but it is not showing up. Why is that?

// package.json　　

{
  "name": "nextapp",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start"
  },
  "dependencies": {
    "next": "9.4.4",
    "react": "16.13.1",
    "react-dom": "16.13.1",
    "styled-components": "^5.1.1"
  },
  "devDependencies": {
    "@types/node": "^14.0.18",
    "@types/react": "^16.9.41",
    "@types/styled-components": "^5.1.0",
    "babel-plugin-styled-components": "^1.10.7",
    "typescript": "^3.9.6"
  }
}

　 I included

This is where the images are supposed to load from.　　

　　　　

import React, { FC } from "react";
import styled from "styled-components”;


const SidebarStyle = styled.nav`
display: flex;
flex-direction: column;
width: 175px;
background-color: #F6F7F9;
height: 100vh;
border: solid 1px #ffffff;
`;

export const User: FC = () => {
return (
<SidebarStyle>
  <img src="../../public/images/icon.svg" />
</SidebarStyle>
);
};

export default User;
reactjstypescriptnext.jsstyled-components

Answer №1

To begin with, import the image and then reference it within <img /> tags.

import React, { FC } from "react";
import styled from "styled-components”;
import icon from '../../public/images/icon.svg'

const SidebarStyle = styled.nav`
display: flex;
flex-direction: column;
width: 175px;
background-color: #F6F7F9;
height: 100vh;
border: solid 1px #ffffff;
`;

export const User: FC = () => {
return (
 <SidebarStyle>
   <img src={icon} />
 </SidebarStyle>
 );
}

export default User;

Answer №2

By including an image in the public/images/icon.svg directory, you can easily retrieve it using the code below: more information

const DisplayedImage = () => {
  return <img src="/images/icon.svg" alt="displayed image" />
}

export default DisplayedImage

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Guide on navigating to a specific page with ngx-bootstrap pagination

Is there a way to navigate to a specific page using ngx-bootstrap pagination by entering the page number into an input field? Check out this code snippet: ***Template:*** <div class="row"> <div class="col-xs-12 col-12"> ...

htmlcssangulartypescriptreact-native

What could be causing the useEffect Hook to provide a double count upon initial click?

Can you help me understand how the useEffect hook works? I have a question to discuss regarding my code snippet: import React, { useState, useEffect } from "react"; const DependencyExample = () => { const [userData, setUserData] = useState( ...

reactjsreact-hooks

Is there a way to ensure that the useEffect hook only runs after the useNavigate hook has been utilized? How can I prompt the initial render to occur only following the useNavigate

After using the useNavigate hook, how can I ensure that useEffect runs and triggers an initial render in my component? Within the App.js component, which serves as the homepage with the "/" path, the following code is implemented: const [contact ...

reactjsreact-hooks

Caution: The use of <fieldset> inside a <p> tag is not allowed in the TextField Component of Material UI in React JS. Please review and edit accordingly

<div className="textInputTag"> <span className="label">{props.label}</span> <TextField placeholder={placeholder} error={error ? true : false} defaultValue={props.defaultValue} onBlur={onBlur} onInput={on ...

reactjsmaterial-uiuitextfieldreact-error-boundary

Passing Object Data from Child to Parent Component in React and Leveraging its Functionality

After performing a date calculation, I stored the values of year, month, and day in an object. Now, my goal is to send this object to the parent component App.js, and then pass that data to another child component named Modal.js as a prop. I want to displa ...

javascriptreactjsreact-hooksreact-propsreact-component

Creating an Inner Join Query Using TypeORM's QueryBuilder: A Step-by-Step Guide

Hello there! I'm new to TypeORM and haven't had much experience with ORM. I'm finding it a bit challenging to grasp the documentation and examples available online. My main goal is to utilize the TypeORM QueryBuilder in order to create this ...

typescripttypeorm

What is the best way to load a component every time the function is called?

Currently, I am utilizing Angular and endeavoring to create reusable actions such as bulk updates, deletes, and deactivations. I have incorporated all of these actions into another component and aim to use it as a generic method. This implies that I have ...

angulartypescriptangular6angular5

"Enhancing User Experience: Implementing Internationalization and Nested Layouts in Next.js 13.x

In the midst of working on a cutting-edge Next.js 13 project that utilizes the new /app folder routing, I am delving into the realm of setting up internationalization. Within my project's structure, it is organized as follows: https://i.stack.imgur.c ...

typescriptnext.jsinternationalizationnext.js13i18next

Updating the Background Color of FloatingActionButton in material-ui ReactJs

In my ReactJS code, I am using a set of FloatingActionButton components from the material-ui library as shown below: <div className="callActionButtons"> <FloatingActionButton style={{padding: '5px'}}> <VoiceSettingsIcon/> ...

reactjsmaterial-uifloating-action-button

Utilize a Material UI GridList to transform images into a captivating background display

Incorporating a GridList displaying a variety of images fetched from an external source, I have successfully created an ever-changing image gallery. Now, my goal is to convert this dynamic image gallery into grayscale or transparency and utilize it as a ba ...

javascriptcssreactjsmaterial-ui

Sorry, I am unable to complete this task as it involves paraphrasing copyrighted material. How about I summarize the text instead?

Currently, I am developing a JWT authentication system using Next.js 13 with Redux Toolkit. My frontend is built on Next.js and my backend is in Django. The issue I am encountering lies in the communication between the API page in Next.js and Redux Toolkit ...

next.jsreact-reduxnext.js13

Discover the power of utilizing the reduce function to extract the value of a specific field within an array of Objects

In the following example, we have an object with 3 forms: formA, formB, and formC. Form A and B are objects, while formC is an array of objects that can contain multiple items. const object: { "formA": { "details": {}, ...

javascriptnode.jsarraysreactjsnext.js

Tips for implementing filters in Angular2 without using the package field in the console

I am currently experiencing an issue with a filter field in my code. The filter works fine when all the package data is present, however, some items do not have a package field. As a result, I need to filter based on the package name but I am encountering ...

javascriptangulartypescriptfilter

How to dynamically change the content of the <header> in Nextjs depending on the loaded component

I recently finished creating a app/components/Header.js component. export function Header() { return <> <header className="w-full h-14 grid grid-cols-12 bg-gray-50 text-black dark:bg-gray-900 dark:text-white"> <div ...

javascriptreactjsnext.jsnext.js13

Adding a tab panel is causing the page not to render properly, but when there is no tab panel code, the page renders correctly

function TabPanel(props: TabPanelProps) { const { children, value, index, ...other } = props; return ( <div role="tabpanel" hidden={value !== index} id={`simple-tabpanel-${index}`} ...

reactjsmaterial-ui

Granting permission to the user

I am facing an issue with authorizing the admin user. Although the backend code is functioning properly, I am encountering difficulties in requesting the admin route and authenticating the logged-in user. Initial attempts involved storing the isAdmin value ...

javascriptnode.jsreactjsexpress

Ways to transfer a state from the child component to the app component

I have 2 different components that contain sub-components within them. In one of these components, I'm trying to figure out how to transfer the click event from the sub-component to another component so that it can render an entirely new component for ...

javascriptreactjs

Encountered a TypeError when trying to access the 'subroute' property of an undefined object during JEST and enzyme testing

Currently, I'm utilizing jest along with the enzyme library for testing React components using the create-react-app boilerplate. After running the test suite, I encountered the following error: I haven't been able to find a solution to this issu ...

reactjsjestjsenzyme

When clicked, duplicate two input elements while excluding a specific element

My component renders an 'individual item' with 3 input fields. There is a button at the bottom that copies and adds another individual item on click. I am trying to figure out how to render the first two inputs without the final price input when ...

reactjs

Learn how to set default values for UI TextField, Select, and checkbox material fields in React using react-hook-form

Currently, I am facing an issue with assigning default values to a form that utilizes material UI and react-hook-form for managing the form. The problem lies in the fact that select fields do not get assigned values, and even when they do, the labels of Te ...

reactjsmaterial-uireact-hook-form