I have this image folder:
- country
- EN
- FR
- IT
I want to import an image this way:
import image from "./country/{country}/test.png";
How can I do this?
i will always use both of the methods (require, import).
first thing is i do categorise images in 2 ways:
what i am using so may times and using it frequently.
what is rarely used.
then i will create an js file in that i do import all 1'st kind of images (frequently used). When project will load it will execute all import statements first so that time my all of the images are imported already so then whenever i need this images i do get that image from utility what i have created for importing images. that util file will be kind of this:
import CSK from "../assets/images/teamLogo/CSK.png";
import CSK_bw from "../assets/images/teamLogo/CSK-bw.png";
export function getImage(name) {
switch (name) {
case "CSK":
return CSK;
case "CSK_bw":
return CSK_bw;
}
}
so whenever i need image i just import above function with image name.
and second category images i will use as require.
Related
I am getting this error trying to import this file from src/assets/documents folder.
I am working on a React Project with Typescript. I am trying to import the file and feed it's value in an anchor tag so it can be downloaded.
When I'm importing images from src/assets/images, this problem is not existing.
Can anyone help?
I had the same problem.
Since you are using TypeScript you will need to define the type of the data you are importing.
The solution is fairly simple you need to create a proxy file which will map the types.
Usually the of the file ends with .d.ts
In Vue for example the convention is shims-vue.d.ts
Click [here][1] to see an example
The content of the fie should be:
declare module '*.doc' {
import nameOfDoc from src/assets/documents (should be your path to the doc)
export default nameOfDoc
}
I'm working on a React project, and creating a component called SVGLogo that simply imports an svg and exports as a component. I noticed that when I use require() to import my svg file, it works fine:
const SVGLogo = require('../../../../../vft-site/src/images/logo.svg');
But my linter suggests I use the import statement. I changed it but now I get the error 'cannot find module... or its corresponding type declarations':
import SVGLogo from '../../../../../vft-site/src/images/logo.svg';
Why are these different?
import comes in es6 like a new feature and require can be called from anywhere but import can be called on top of script
I'm currently working on a project with React JS, that contains lots of assets. And actually, I'm wondering what is the best way to import assets between these two methods :
- Creating a JSON file that contains all informations, with their assets paths (eg. mySuperImg: "../assets/img/myImage.jpg" then using the path for my image tags)
- Importing all assets directly in the component (or using the Context API, perhaps?) (eg. import {myImage} from "../assets/myImage.jpg" then using the img tag with that path <img src={myImage} alt="My Image"/>)
My questions : What the best way to import assets ? Is there a speed difference between these two methods ?
Thanks! Take care!
I'd say it depends on you. Whichever way you feel comfortable, you should go for it. Generally, I import the assets in the corresponding file, but the other way can also be used. Instead of json, you could use js approach as well, similar to how we export actions, for eg,
export const ADD_PROJECT = "add_project";
export const FETCH_PROJECTS = "fetch_projects";
You could use something like,
export const IMAGE = require("the location to your image");
To answer if it would take more time, I don't think that there would be any performance issue, as we use a similar approach for the actions most of the times.
it's best to keep the images in assets and use them in your source, if you work with the JSON file then you have to keep track of both of them and it will mess up as you say you have a lot of assets.
I'm working on films searcher in React. The API I'm using does not have full data on every single film, some of them do not have an image. I want to put a placeholder name (possibly an image) where there should a photo, but there is no data. I do not know how to create a function that will check if the image is available. Any idea?
If you use propTypes in your React application, you can add a default there.
https://reactjs.org/docs/typechecking-with-proptypes.html
Alternatively, you can use a conditional (ternary) operator in your script as you did in your TitleComponent.jsx.
In that case you just have to import the default image to your component first.
import defaultImg form '..images/default.jpg'
For a SET game that I am creating in React (using Create React App), I need to import 81 image files representing the 81 possible cards used in the game. With the help of a Python script, I created this extremely long list of imports
import i0000 from './assets/0000.png'
import i0001 from './assets/0001.png'
[...]
import i2221 from './assets/2221.png'
import i2222 from './assets/2222.png'
and since I will need to reference those variables using strings representing each card, I have this object:
const refs = {
'0000': i0000,
'0001': i0001,
[...]
'2220': i2220,
'2221': i2221,
'2222': i2222
};
The good thing is that now I have all the card images pre-loaded to be called easily with
<img src={refs[card]} />
But the bad thing is I have 164 lines of ridiculous code that make it work. I'm wondering if there is a better way to pre-cache and reference a directory full of images.
Move all the images to your public folder, say public/cards.
Then you can reference them with <img src={`cards/${card}.png`} /> without the need for any import statement.
Webpack can no longer warn you if the referenced images are missing though, so just make sure they are there.
Two approaches:
First, you eliminate manually creating the refs object by struturing your code like this:
export i0000 from './assets/0000.png'
export i0001 from './assets/0001.png'
And where you want to use these assets:
imports * as refs from './assets'
<img src={refs[card]} />
Secondly, you could use a bundling system that supports dynamic requires e.g. https://webpack.github.io/docs/context.html#dynamic-requires