Support for images in Frontity

[marika.kononen]

Hi,

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.<anonymous> (/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)

[luisherranz]

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

Please update using:

npm install @frontity/core@latest

---

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

[marika.kononen]

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

[John_Jordan]

Hi there very new to this, only heard about it a couple of hours ago!

I was trying to get a logo in the header without success so i tried this route of creating a component. My issue is that the file path to the image seems to brake wherever I put the image Im trying to use.

I have attempted putting it in an assets folder in src. I have also tried uploading it to wordpress( i would much prefer a solution that works like this) can anyone help me with how i could get images from the wordpress media uploader to work, in my example as a logo in the header?

[iamuchejude]

Hey @John_Jordan Welcome to Frontity! We’re are glad that you decided to give the Frontity framework a try

One way to use images from WordPress Media in Frontity by setting the value of the src attribute to the URL (source) of the image on WordPress.

const Comp = () => (
  <img src="url-to-image" alt="Image Alt" />
);

If a png logo image is saved in folder e.g in an assets folder in src and you wanna access the image in a component save in a components folder in src, you’ll need to import the image like this:

import logoImage from "../assets/logo-image-name.png";

const Comp = () => (
 <img src={logoImage} alt="Image alt" />
);

I hope this solves the issue

[nat.clamp]

Hi there,

I’ve followed your instructions above but I can’t seem to load an image onto my site that I’ve saved in a static folder - I keep getting this error when I run npm run dev

ReferenceError: URL is not defined
at eval (webpack-internal:///./node_modules/frontity/dist/src/utils/url.js:17:30)
at Object../node_modules/frontity/dist/src/utils/url.js (/Users/natalieclamp/dev/jvcparry.com/build/server.js:1789:1)
at __webpack_require__ (/Users/natalieclamp/dev/jvcparry.com/build/server.js:27:30)
at eval (webpack-internal:///./node_modules/frontity/dist/src/index.js:1:2304)
at Object../node_modules/frontity/dist/src/index.js (/Users/natalieclamp/dev/jvcparry.com/build/server.js:1717:1)
at __webpack_require__ (/Users/natalieclamp/dev/jvcparry.com/build/server.js:27:30)
at eval (webpack-internal:///./packages/jvcparry-theme/src/server.js:4:66)
at Module../packages/jvcparry-theme/src/server.js (/Users/natalieclamp/dev/jvcparry.com/build/server.js:5216:1)
at __webpack_require__ (/Users/natalieclamp/dev/jvcparry.com/build/server.js:27:30)
at eval (webpack-internal:///./build/bundling/entry-points/server.ts:3:83)

Here’s my set up:

Image is saved in /src/static/images

The component I’m trying to load the image into:

import imageUrl from "../static/images/jvcparry-portrait.jpg";
const AboutMe = ({ state }) => {
  return (
    <>
      <Container>
        <Right>
          <img src={imageUrl} />
        </Right>
      </Container>
    </>
       );
    };

export default connect(AboutMe);

I’ve had a look at where the error says it’s occuring and the file says that it was depreciated.
Can anyone help?

EDIT: the more I fiddle around with this, the more i’m convinced it actually doesn’t have anything to do with adding the image - any ideas?

[luisherranz]

It seems like you are still using Node 8. That version is not maintained anymore. Try Node 10 or 12.