Solution 1 :

I’m not sure how did you load this template with webpack inside a html plugin or a via a loader but looks like require('thing') returns a module object which has default prop as a string path you need.

src={require("../../assets/stores/apple-store-badge.png").default}

I’m guessing you currently have enabled esModule object for a loader which is likely file-loader or url-loader causing the issue. If so, you just simply turn it off then it exports the right url for you (without exporting as a module)

Problem :

In Reactjs image sources seeming like src=”[object Module]”. But somehow .svg files not have this issue and it only occurs and some .png files even with the static ones. For example:

<div className="flex-row stores-main">
                <a
                    href="https://play.google.com/store/apps/details?id=com.xxx"
                    target="_blank"
                >
                    <img
                        alt="play-store"
                        className="play-store"
                        src={require("../../assets/stores/google-play-badge.png")}
                    />
                </a>
                <a
                    href="https://apps.apple.com/tr/app/verified/xxx"
                    target="_blank"
                >
                    <img
                        alt="apple-store"
                        className="apple-store"
                        src={require("../../assets/stores/apple-store-badge.png")}
                    />
                </a>
            </div>

In here play-store image rendering normal but apple-store image is not rendering and i am sure that the paths are correct.

By