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)
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.