How to reference an image in NPM React Component?

Question

I made a date picker in response and I try to load it into NPM and it uses external svg, but I am having problems with the correct link to this svg.

So my file directory is as follows:

+-- imgs
|   +-- arrow.svg
+-- src
|   +-- Datepicker.jsx
|   +-- index.js

Then in Datepicker.jsx I have <object style={STYLES.arrow} data="../imgs/arrow.svg" type="image/svg+xml" />

But then when I install it through npm and try to use it in the project, it says:
GET http://localhost:8000/imgs/arrow.svg 404 (Not Found)

It looks like it is looking for the imgs directory in the root of the project, and not in the module itself, but I'm not sure how to fix it.

Answer 1

I would probably use webpackjust the requiredata before compiling:

const data = require('../imgs/arrow.svg');

<object style={STYLES.arrow} data={data} type="image/svg+xml" />

npm install --save-dev webpack url-loader - . webpack , (. ).

, , , .