I'm creating a game with sprays but I can't put all the sprays in the same folder because at least 50/ 100 and more are comming and I want to import all the images from a folder, the problem is that the name is variable.
Example :
import * as JhonImgs from "../images/Jhon/"
import * as JhonImgs from "../images/Lucas/"
Or something like that. All the images have the same extension, .png.
The problem is require.context() doesn't allow me use variables. And I can't call one by one, or use a cdn server.
Thanks.
Related
vmsg requires a URL link to a .wasm file that it requires in order to work. Their sample code (which does work) looks as follows:
import React, { Component } from 'react';
import vmsg from 'vmsg';
const test = new vmsg.Recorder({wasmURL: "https://unpkg.com/vmsg#0.3.0/vmsg.wasm"});
But I would like to have that file refer to a directory in my app rather than this external URL and I'm not certain:
Where I should place this file (assets/public/node_modules folder)?
What I would do to make this work (do I do an import or do I reference it directly somehow)?
I've tried placing the file in my assets folder and changing the line of code to many things along the lines of:
const test = new vmsg.Recorder({wasmURL: '../../assets/vmsg.wasm'});
But nothing seems to be working, which, after some reading, makes sense. But I'm still not sure what the right way to add a file like this should be instead.
I've seen some people run into something like this specifically when trying to import photo assets. One solution that I've found to work for that is to include .default at the end.
const test = new vsmg.Recorder({wasmURL: require('../../assets/vmsg.wasm').default});
I know there are several options where to store and how to serve images in react.
two options are:
store the image in public folder and then use it like this:
<img src={process.env.PUBLIC_URL + '/someImage.jpg'} />
store the image somewhere else in the project, import it and use it like this:
import image from '../../assets/images/someImage.jpg'
<img src={image} />
I need now to create an img tag with srcSet with few images that the correct size will be shown according to screen width.
In order to avoid adding many lines of code (4 or 5 sizes for each image) for importing the images as I do today (I am using the second method as described above), I think maybe to move them to the public folder then I wont need to import many versions and also mention all those versions in the srcSet.
My question is
what will be the differences between serving images using the first vs the second methods I wrote above?
and which option will you work with?
in case you have many images and want to set srcSet with few versions to each image?
I have an ICM profile that I wish to import into a certain file. I need this because I need to fetch the contents of the file into a Uint8Array (array buffer). However, I can't get the file to import.
I've tried
import file from './tester.icm';
import { file } from './tester.icm';
const file = require('./tester.icm');
I would expect it to work like importing an image:
import logo from './logo.png';
However, this approach does not work.
This is a new question since it deals with a binary format, not a simple text file.
The import statement that you are using is done by Webpack and not by React. Webpack can not import all file types by default, for some file types you will need to configure your own loader. You can have a look at the docs for more information.
So Im building a Reactjs project (still learning) and I was wondering if its possible to define a constant that can then be used in other files to determine file locations. eg:
IMG_ROOT = /images/
I could then use this whenever importing an image. eg:
import IMG from IMG_ROOT + filename.jpg
Is this possible?
I have a project that I've been working on, and I need to import an existing form that someone else has created. The file name of the form I need to import is Form2.vb. However, there is already a Form2.vb in my current project. How do I add the other Form2.vb file in VS without replacing the Form2.vb that's already in my project?
Don't leave your files with the default name like FormN.vb. Rename the existing file to match its function. Once you do that, you could import the other form without a naming conflict. Once you import it, give it a good name that matches its function.