When I try to import any file other than .js extension, it gives error saying I can't find the file. I'm trying to import an image right now. Auto complete does not find the image, but finds the folder. If I type the name of the image manually it gives error when making the bundle.
version react-native 0.60.
enter image description here
If you want to use it like that you can add an index.js file inside of your image folder to export all your images, like this:
images/index.js
import login from './ImageLogin.jpg';
export default { login };
login.js
import images from '../images';
and then
<Image source={images.login}/>
Related
Trying to import image folder from public folder to src folder in react but i kept getting error messages in the terminal and my chrome
[the vscode screenshot](https://i.stack.imgur.com/gtyL0.png)
Your image is inside a Image folder. So the import should be
import Airbnb from '/Images/airbnb.png'
If it gives webpack import error you can do it like this way
<img src='/Images/airbnb.png'/>
Here /Images/airbnb.png gives a direct link to the image of the public folder.
you need to import from the folder in which the file exists
import Airbnb from '../../public/Images/airbnb.png'
I've just started a Vite React TS project. I need to import a svg image from my assets folder in my Home Page. When i try yo import it with the following line: "import mascotImageUrl from "../assets/mascot.svg";" the console show that it can't find the module '../assets/mascot.svg'.... Can Somebody help?
I have seen this youtube video refrence.
I am trying to import screens by using this
import FirstScreen from "#screens/FirstScreen";
import SecondScreen from "#screens/SecondScreen";
and making a package.json file in screens folder and writing this code in it.
Thanks for helping.
{
"name": "#screens"
}
Is there a way to do that or I am doing it wrong as I am getting this error.
Error --
enter image description here
I am trying to import a png photo from a local folder in my react native project using import image from '../img/fittings.PNG';.
But I get an error saying the file doesn't exist: https://i.stack.imgur.com/XEomy.png
For reference my files look like this: https://i.stack.imgur.com/LegiM.png
In React Native import is using for importing modules who has export method inside , if you want to import any image you need to require it in the page you want to use by using require() method:
import { Image } from "react-native";
<Image source={require("../pathToImage.ext")} />
If you're using a server such as npm, yarn or expo and you've included your image while server is running, you just need to restart the server.
Theoretically the folder was not there when you ran the server previously.
I don't think it's the right way. You could try:
import { Image } from "react-native";
<Image source={require("../img/fittings.PNG")} />
or whatever the path to your image is.
I'm new to react and I'm just trying to start a new website but not being successful at it. For some reason, I get this error Module not found: Can't resolve './pages' in '/Users/joanaleitaooliveira/repos/web-project/src'. Here you can see the App.js file and the about page file. All the other pages are the same.
I've also tried ./src/pages/About/index.jsx but got the same result. Can anyone tell me why is this happening?
[![enter image description here][1]][1]
The cause of the problem is due to the path mentioned in import statement not getting resolved.
Problem can be fixed by using the complete path to the component in the import statement.
Working example:
import Home from "./pages/Home"
import About from "./pages/About"
import Contact from "./pages/Contact"
You would need to create an index.js file in pages that exports all these components if you want to import through ./pages.