0

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!

Damian Dziaduch
  • 2,107
  • 1
  • 15
  • 16
Sam Clymer
  • 3
  • 2
  • https://stackoverflow.com/questions/33248012/how-to-use-react-require-syntax does this answer your question – Kevin.a Jan 08 '21 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 Jan 08 '21 at 19:11

1 Answers1

1

Could you try to use this instead

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

That fixed the issue for me.

Esteban Crd
  • 26
  • 4
  • 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. – Sam Clymer Jan 09 '21 at 12:13