moving assets out of /public to /src

[alucard87pl]

Currently all the glyphs are contained in /public/vfx and referenced in code via

import glyphs from './glyphs';

glyphs.js is a file storing an array of JSON objects:

export const glyphs = [
  { id: 1, src: "./vfx/glyphs/glyph1.png", description: "Earth" },
  { id: 2, src: "./vfx/glyphs/glyph2.png", description: "Crater" },
...
  { id: 39, src: "./vfx/glyphs/glyph39.png", description: "Leo" },
];

export default glyphs;

For reasons beyond my comprehension, these files can't be held in /src because then importing doesn't work quite as well.

[Kuboczoch]

import is for static files only and images like glyph01.png theoretically can be changed in the future. So they can be held in /public/vfx/glyphs.

If you have to do it, it will look like this:

import Img0 from '../images/0.png';
import Img1 from '../images/1.png';
import Img2 from '../images/2.png';
import Img3 from '../images/3.png';
import Img4 from '../images/4.png';
import Img5 from '../images/5.png';
import Img6 from '../images/6.png';
...

Unless you will use webpack and use this code:

function importAll(r) {
    let images = {};
    r.keys().map((item, index) => { images[item.replace('./', '')] = r(item); });
    return images;
}

const images = importAll(require.context('./images', false, '/\.png/'));

<img src={images['0.png']} />

The list of names (description) should be exported to increase legibility and ease of use in the future

[alucard87pl]

Closed and Resolved.