Having trouble with the <img> tag on CodeSandbox.io? Image not loading properly

I've been attempting to insert an image using the <img> tag on CodeSandbox.io. However, each time I try to do so, it fails to display and defaults to the alt tag (Shows Mountain).

The goal is to load an image from the same folder as the file that contains this JS file.

Here is the code responsible for generating the HTML:

function Navbar() {
  return (
    <navbar className="navbar">
      <div>
        <img src="business-landing-page-template-with-photo_52683-19539.jpg" alt="Mountain"/>
      </div>
    </navbar>
  )

If anyone could guide me on how to successfully load the image, that would be greatly appreciated.

htmlcssreactjscodesandbox

Answer №1

To link to an image in the public folder, you need to use a file path relative to it, for example: public/img/image.jpg. If the source image is within your component directories, you can use require and a relative path.

For instance, if your component is located in src/components and the image is in src/img:

function Navbar() {
  return (
    <navbar className="navbar">
      <div>
        <img
          src={require("../img/business-landing-page-template-with-photo_52683-19539.jpg")}
          alt="Mountain"
        />
        // or in public
        <img
          src="src/img/business-landing-page-template-with-photo_52683-19539.jpg"
          alt="cat"
        />
      </div>
    </navbar>
  )
}

https://codesandbox.io/s/quiet-thunder-2jn66?fontsize=14&hidenavigation=1&module=%2Fsrc%2FApp.js&theme=dark

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

Retrieving data from a promise in Redux

Is there a way to access the data of the first dataElement in the array and log its name using console.log? import React, { Component } from 'react'; class Submit extends Component { componentDidMount() { const programStage = this.p ...

arraysreactjsobjectreduxpromise

Tips for creating Material UI elements using React and Typescript

I am looking to extend a component from the Material UI library by creating a custom component that encapsulates specific styles, such as for a modal wrapper. However, I feel that my current solution involving the props interface may not be ideal. Is the ...

reactjstypescriptmaterial-ui

Tips on confirming the completion of my form when the next button is pressed

I am working on a multi-step form with a jQuery script to split the forms. The first form has only one button - the next button, which takes the client to the next form. However, when I click on the next button in the first form, it moves to the next form ...

javascriptjqueryhtmlforms

Checking the validity of email domains in real-time using Javascript

Is there a way to dynamically validate domains using JavaScript? I have a specific requirement which involves validating domains that are dynamically generated from user input. The goal is to match the domain with the company name selected and determine i ...

javascriptreactjsregexvalidation

The declared type 'never[]' cannot be assigned to type 'never'. This issue is identified as TS2322 when attempting to pass the value of ContextProvider using the createContext Hook

I'm encountering an issue trying to assign the state and setState to the value parameter of ContextProvider Here's the code snippet:- import React, { useState, createContext } from 'react'; import { makeStyles } from '@material-ui ...

reactjstypescriptreact-hooksreact-state-managementcreatecontext

Using SetTimeout with the TextInput component in a React-Native application

Currently, I am working on creating a SearchBar component for my new Android application using React-Native. As a newcomer to React-Native, I created a function called _changeInput() to handle passing text to a local function. Initially, the text pass wor ...

javascriptandroidreactjsreact-native

Sending information to the server displaying as invalid

As a beginner in React JS and Flux, I am struggling to pass my form data from React to my server. While the code runs without errors, the data appears as undefined. Can anyone assist me with this issue? Here is the code that I am using: Below is my Store. ...

reactjsajaxflux

Discovering the specific DOM element that has been clicked using only JavaScript

Looking to enhance my HTML document with interactivity, I wanted to achieve a feature where clicking on a div element would display its respective id. I attempted the following approach: window.onload = function() { associateIds(); clicked(); } fu ...

javascripthtmldom

What is the best approach to make the child element function properly within my CSS grid design?

I've been struggling to set up a 3-column grid with 2 rows for showcasing my projects on my portfolio. Unfortunately, they are only appearing in the first column and I can't figure out how to fix it. Here's a visual representation of the is ...

htmlcsscss-grid

How to Utilize USB Devices with Node-Webkit?

I am in the process of creating a node-webkit application that must be compatible with all three major desktop operating systems (Windows, Mac, and Linux). My goal is to establish a connection between my app and a USB device that is plugged in, but I am en ...

htmlnode.jswebkitv8node-webkit

Decoding HTML with PHP

I'm facing an issue with creating a Web page Parser. The structure of the page is as follows: <TABLE WIDTH=80%> <tr><td colspan=7><BR><BR></td></tr> <TR> <Td colspan=7><FONT FACE="arial" align ...

phphtmlparsing

Ensuring React Native/Redux child components receive the latest state updates with every change

When using <NavigationCardStack/> as the root component in React Native and Redux to render routes with _renderScene(), I noticed that the updated state is not always passed down every time there is a state change. Despite having console.log(this.pro ...

javascriptreact-nativereduxreactjs

Revealing non-div elements with the CSS hover attribute

I'm looking for a way to utilize the CSS hover property on individual elements within a div in order to affect specific span elements. For example, hovering over "something1" should reveal "text1" and so forth. Is there a way to achieve this without ...

htmlcsshovercss-selectors

How can we delay UI updates until API calls have finished processing a chunk of requests in Redux-Saga without affecting the responsiveness of the user interface?

function* fetchDataFromChunks(dataList = []) { const segmentedData = yield call(splitDataIntoChunks, dataList, 5); for (let chunk of segmentedData) { const requests = chunk.map(item => call(retrieveImageData, item._id, item.im ...

javascriptreactjsweb-workerredux-saga

Utilizing the Bootstrap 5 Alpha validation script within a React environment

I've been working on implementing Bootstrap 5 alpha's validation in my React app. The form should not submit if left blank, and it should display a check or an error mark at the bottom accordingly. So far, I've added the necessary node pac ...

javascriptreactjstwitter-bootstrapexpressreact-redux

Dynamic Display Picture Banner - Adjustable Layout

My home page features a full screen image header that I'm working to make responsive. The width of the image is being cut off on various screen sizes. I've attempted adjusting the height and width settings, but I want the image itself to resize ...

csswordpressresponsive

Encountering a React JS error during the installation process of all packages

An error occurred while trying to resolve dependencies during the npm installation process. The specific error message reads: "npm ERR! code ERESOLVE, npm ERR! ERESOLVE unable to resolve dependency tree." The issue relates to conflicts wi ...

reactjsreact-reduxmaterial-uifrontend

Unable to retrieve response after submitting form data through NEXTJS to API endpoint

Hey there! I'm currently working on uploading images to AWS S3 and I've encountered a frustrating issue. I can't quite figure out why it's behaving this way. So, here's the deal.. I'm using formdata to send data to my API en ...

reactjsaxiosnext.jsform-data

Implementing jQuery slideDown effect on a nested table element

I am facing an issue where the nested table does not slide down from the top as intended when a user clicks the "Show" button. Despite setting the animation duration to 500ms with jQuery's slideDown() function, the table instantly appears. I am using ...

javascripthtmljquery

Exploring the concept of mapping and looping within a simple React component

For a component that is used by multiple data sets but displays the same information, should it accept only native data types or an array of objects? The dilemma arises from the fact that each table has different data properties. <ScrollView> {lis ...

reactjsreact-nativecomponentsreusabilityreact-component