Static files

🙋Get Help
1

Hi there. Starting with Frontity and loving it, but I’m not able to find the docs to use static files like images. Tried on /static/images/loading.gif but not working. Only works if I put it on /build/static/images/loading.gif but any time I run build or dev the folder is deleted.

2

Hey @josema.enzo! :blush:

One option would be to create a folder inside your theme named static and upload there your images. Once you have done that you can import them when needed. Here you have an example:

import imageUrl from "../static/images/image.jpg"

const Image = () => (
  <div>
    <img src={imageUrl} />
  </div>
)

export default Image

As you can see we are storing the url of the image as a string and using it later. Please, let us know if it solves the problem or share any other questions you have.

3

This is impossible?

<img src="/static/images/image.jpg" />

5

Not sure about this, @David would help you better here.

I guess it should work the same way if you write the url yourself, but it may be different than the one you are using: "/static/images/image.jpg". You can check the correct url if you console.log the value of imageUrl on the previous example.

Just to know and learn, is there any reason why you prefer to write the url instead of importing it like in the example?

Thanks!

6

No, is not about bad typing. Is just not resolve. The funiest part is that http://localhost:3000/favicon.ico resolves but http://localhost:3000/logo.png doesn’t. Both on the root proyect. I don’t understat why is this behavior.

Multiple reasons why the import way is worse

  1. I type more
  2. If you move the file to another folder you have to retype the import
  3. Webpack have to process the import, which means slowers bundles
7

I’ve been checking this and as you said Frontity doesn’t work that way. You have to import the images you want to include in your project so WebPack can include them in the build.

Anyway, most of the time you will be working with your WordPress images. For example, when you load the content of a post and there’s an image inside it, it will use the image url: https://mywordpress.com/wp-content/... . You can always store your media in WordPress as you usually do (or another storage), and point there instead of your project, you should just include in your project the images that are exclusive for the theme.

And if you prefer to include them in your project, it doesn’t mean slower builds, and you can create a fixed folder so you make sure the files don’t move.

8

In my case I’m creating a new template/theme so the need for a static files is to use images on that template, like icons backgrounds etc.

Thank you anyway for the help.

9

Oh I see, then I guessed you’ll have to import them, I hope this won’t bother you that much :pensive:

We’re looking forward to seeing what you are building :relaxed: If you have more questions feel totally free to reach out again.

1 Like
10

Hi! I’m with the same problem here. I need to import some files dynamically. So I’m doing something like this in my component:

import defaultImage from '../img/hero.png';

const Hero = ({ upperTitle, mainTitle, message, imgPath }) => {
  const img = imgPath ? require(`../img/${imgPath}`) : defaultImage;
  return (
    <div className="w-full bg-blue-100">
      <div className="container h-auto px-3 mx-auto flex flex-wrap flex-col md:flex-row items-center content-center">
        <div className="flex flex-col w-full md:w-2/5 justify-center items-start text-center md:text-left">
          <p className="uppercase tracking-loose w-full">{upperTitle}</p>
          <h1 className="my-4 text-5xl font-bold leading-tight">{mainTitle}</h1>
          <p className="leading-normal text-2xl mb-8">
            {message}
          </p>

          <button className="mx-auto lg:mx-0 hover:underline bg-white text-gray-800 font-bold rounded-full my-6 py-4 px-8 shadow-lg">
            Subscribe
          </button>
        </div>
        <div className="w-full md:w-3/5 py-6 flex ">
          <img className="w-full z-0 self-end" src={img} alt="Hero title" />
        </div>
      </div>
    </div>
  );
};

export default connect(Hero);

I’m doing a require inside my code. Is this safe?

Best regards

12

Yes, that should work.

Theoretically, we should all use the new async import() but React doesn’t play nice with async functions so you’d have to add useEffect and therefore it won’t work in the server:

import placeholder from "../images/placeholder.png";

const DynamicImage = ({ num }) => {
  const [src, setSrc] = React.useState(placeholder);
  React.useEffect(() => {
    import(`../images/img-${num}.png`).then(src => setSrc(src.default));
  }, [num]);

  return <img src={image} />;
};

So I guess using require() is the best way to do this.