Support for images in Frontity


I have created HeaderImage component which contains header image and in that component I import png file. I want to add HeaderImage component to header.js . This may not be Frontity related problem and I guess it just that I don’t know how the whole React system works.

header-image.js =>
import Background from ‘…/img/metsa.png’;

I got below error and it says “you may need appropriate loader to handle this file type.” I have read that I need either url-loader or file-loader and for it I need to install it or both with npm, which I did.

Then I need to create webpack.config.js file with correct input. But my problem is, that where should I put webpack.config.js file in Frontity directory structure? I guess the correct place is a root, but is it below “Frontity dir” or is it below the theme dir => “mars-theme”? Or am I doing this totally wrong way?

I have tried many things, but I am doing something wrong, because the error just stays there.

ModuleParseError: Module parse failed: Unexpected character ‘�’ (1:0)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)
at handleParseError (/Users/marikakononen/Koodaus/KoodausProjektit/GitHub/Frontity-first-app/node_modules/webpack/lib/NormalModule.js:447:19)
at doBuild.err (/Users/marikakononen/Koodaus/KoodausProjektit/GitHub/Frontity-first-app/node_modules/webpack/lib/NormalModule.js:481:5)
at runLoaders (/Users/marikakononen/Koodaus/KoodausProjektit/GitHub/Frontity-first-app/node_modules/webpack/lib/NormalModule.js:342:12)
at /Users/marikakononen/Koodaus/KoodausProjektit/GitHub/Frontity-first-app/node_modules/loader-runner/lib/LoaderRunner.js:373:3
at iterateNormalLoaders (/Users/marikakononen/Koodaus/KoodausProjektit/GitHub/Frontity-first-app/node_modules/loader-runner/lib/LoaderRunner.js:214:10)
at Array. (/Users/marikakononen/Koodaus/KoodausProjektit/GitHub/Frontity-first-app/node_modules/loader-runner/lib/LoaderRunner.js:205:4)
at Storage.finished (/Users/marikakononen/Koodaus/KoodausProjektit/GitHub/Frontity-first-app/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:43:16)
at provider (/Users/marikakononen/Koodaus/KoodausProjektit/GitHub/Frontity-first-app/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:79:9)
at /Users/marikakononen/Koodaus/KoodausProjektit/GitHub/Frontity-first-app/node_modules/graceful-fs/graceful-fs.js:90:16
at FSReqWrap.readFileAfterClose [as oncomplete] (internal/fs/read_file_context.js:53:3)

I’ve just added support for images in @frontity/core v0.4.0.

Please update using:

npm install @frontity/[email protected]

In the future you will be able to modify both webpack and babel using a frontity.config.js file. Everything is prepared internally for that but the code to read from a frontity.config.js file is not yet there :slight_smile:

1 Like

Thank you so much! This is amazing, I just ask something and you implement that. :raised_hands: :slightly_smiling_face:
I will test it tomorrow.

6 posts were split to a new topic: Cannot read property ‘frontity’ of undefined

A post was split to a new topic: Support for fonts