React.JS not rendering images and/or video when using require()

Question

Hopefully this is a simple question and answer, and forgive me if I am missing something easy here, as I am still a bit new to coding...

I am working on a new React App and noticed that when I deploy (for testing UI on various devices), my site is rendering fine, yet images and /or video that I add in do not show up. Please note, I have done other React apps where this works perfectly fine, which is where my confusion lies. For example, the following snippet works fine when I deploy:

import React from "react";
import "./NavbarLandingPage.css";
import logo from "./Inventory-Deals-LOGO-2021-White.png";

class NavbarLandingPage extends React.Component {
    render () {
return (
    <div>
        <nav className="navbar navbar-expand-lg navhelp">
        <a className="navbar-brand navlogo image" href="/">
          <img
          alt=""
            className="responsive"
            src={logo}
          ></img>
        </a>
      </nav>
    </div>
)
    }
}

export default NavbarLandingPage;

However, when I attempt to deploy it using "require()", it only shows a broken picture link, or nothing at all. For example, here is the exact same snippet using the require() method, yet does not work:

import React from "react";
import "./NavbarLandingPage.css";


class NavbarLandingPage extends React.Component {
    render () {
return (
    <div>
        <nav className="navbar navbar-expand-lg navhelp">
        <a className="navbar-brand navlogo image" href="/">
          <img
          alt=""
            className="responsive"
            src={require("./Inventory-Deals-LOGO-2021-White.png")}
          ></img>
        </a>
      </nav>
    </div>
)
    }
}

export default NavbarLandingPage;

One last thing to add - I ran an npm audit fix on vulnerabilities just before I began to take my HTML wireframes and convert them into React Components. One of the issues it wanted to fix caused "breaking changes", which I am sure wasn't a good thing...

Hope this provides enough information to let me know what I am doing wrong here. I would rather bring the images in using require(), as I would assume that would be the best way if rendering images dynamically through API calls, etc...

Thank you in advance for any and all help!

stackoverflow.com/questions/33248012/… does this answer your question — Kevin.a
– Kevin.a, Commented Jan 8, 2021 at 16:10
Thanks for the link @Kevin.a - This is on the right path as I believe the issue is with Webpack, however, I thought the whole point of create-react-app was to have webpack and babel all packaged in and working out of the box? Again, this works fine in two other apps I've developed....I'm considering just reopening a new React App and being more careful on the whole "npm audit fix" as I am concerned that might be what caused my issue.... — Sam Clymer
– Sam Clymer, Commented Jan 8, 2021 at 19:11

Esteban Crd · Accepted Answer · 2021-01-09 07:43:23Z

2

Could you try to use this instead

require("./Inventory-Deals-LOGO-2021-White.png").default

That fixed the issue for me.

answered Jan 9, 2021 at 7:43

Esteban Crd

364 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Sam Clymer Over a year ago

Esteban, that worked perfectly my friend! Thank you!!! I wonder if something changed recently that requires that I add ".default"? Anyhow, I very much appreciate the reply! I also tried to upvote the answer, however I don't have a high enough rank yet on Stack Overflow to have it show.

Collectives™ on Stack Overflow

React.JS not rendering images and/or video when using require()

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related