Question 205559 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – React js image not loading

Here is the directory:

enter image description here

import {useRef} from "react"
import {FaBars, FaTimes} from "react-icons/fa"
import "../css/navbar.css"

export function Navbar() {
    const navRef = useRef()

    const showNavBar = () => {
        navRef.current.classList.toggle("responsive-nav");
    }

    return (
        <navbar>
            <img src="my-app/public/images/logos/word logo trans-preview.png" />
            <nav ref={navRef}>
                <a href="/#">Home</a>
                <a href="/#">Services</a>
                <a href="/#">About</a>
                <a href="/#" className="bottom">Contact</a>
                <button className="nav-btn nav-close-btn" onClick={showNavBar}>
                    <FaTimes/>
                </button>
            </nav>
            <button className="nav-btn" onClick={showNavBar}>
                <FaBars/>
            </button>
        </navbar>
    )
}

the file location is correct and the code should be correct. Why isn’t it loading? everything else is working fine…

I tried moving it to different folders, I tried getting a new pc, I moved homes… Please i need help 🙁

Tags:

4

Answers


  1. 0

    In React, you can get the image path in public directory directly.
    Also, you need to use hyphens or underscores instead of spaces because they may cause problems with loading the image.

    For example:

    <img src="/images/logos/word-logo-trans-preview.png" />

    instead of:

    <img src="my-app/public/images/logos/word logo trans-preview.png" />
    Login or Signup to reply.
  2. 0

    I’ve got a couple of tries for you!

    First of all, have you tried escaping the spaces in the file name?

    <img src="my-app/public/images/logos/word logo trans-preview.png" />

    Anyway, is a good practice not having spaces in filenames.

    Second option:
    have you tried importing your image in React Way?

    import transPreview from "../../public/images/logos/word logo trans-preview.png"

    and then in your image you can do like:

    <img src={transPreview} alt="transPreview">

    In both scenarios, I suggest you to replaces the spaces in the filename with _ or -.

    Hope this helps

    Login or Signup to reply.
  3. 0

    just import that image into the current file and use it

    import logo from "path to your image"


<img src={logo}>
    Login or Signup to reply.
  4. 0

    It’s probably due to the space in your path.
    You can try it

    <img src={encodeURI("my-app/public/images/logos/word logo trans-preview.png")} />
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search