I'm learning to build static sites using Gatsby v2 and encountering a problem:
When I try to import a logo.svg file from the images folder, it does not work. (See attached screenshot)
I checked in the console, it says the logo is defined but never used? I'm not too sure what exactly i did wrong here. Any pointers would be great!
Your JSX syntax is wrong. It has to be <img src={logo} /> without the double quotes. Have a look at the React docs if that is unclear to you :)
Related
I just upgraded my React version to 17.0.2.
Unfortunately, some of my code is not working. Image is not displayed.
This code is one of IMG tag in jSX, and what I did is set 'Src' path dynamically.
It was working without any issue on my previous React version.
Is there any solution to fix this issue?
<img src={require(`../${config.path}/${config.icon}`)} alt='App Icon' />
In React.js latest version v17.x, we can not require the local image we have to import it.
like we use to do before
require(`../../${config.icon}`);
Now we have to you have to put all your images into public folder and then
<img src={`../${config.icon}`}></img>
this method will work.
I'm probably missing something really obvious but I'm not very accustomed to GitHub or React so I'd love some advice.
My GitHub is here:
https://github.com/SarahACollins/PortfolioWebsite
I've tried publishing the website here:
https://sarahacollins.github.io/PortfolioWebsite/
and it just produces a blank page. I've tried several different ways of fixing (changing the homepage, moving the index.html to the front, etc.) but can't figure out what's wrong. Any help would be appreciated.
In the developer console it says:
Uncaught SyntaxError: Cannot use import statement outside a module. Looking at the location of the error shows that it is node.js code.:
import React from 'react';
You need to compile your react source code and create a .js file for the client from it.
I searched and found that I was supposed to use require() but it doesn't seem to be working.
<img src={require("../assets/img/business.png")} alt="business" />
I can confirm that this image path is correct, but on the inspect mode it says the src of my image is [object Module].
Also, when I import the image from the same path, it works completely fine.
Could this be because I am using typescript? I also saw people talking about browserify on another post, does browserify have anything to do with me being unable to use require?
Can u try using .default ?
<img src={require("../assets/img/business.png").default} />
I believe you might need some sort of a loader for to tell your code how to process the image.
Have a look at these following libraries
url-loader
file-loader
I've created a simple React app using npx create-react-app react-portfolio
Created simple page, all things are working properly on my local machine
Pushed to GitHub and published my portfolio into gh-pages (https://yanalinso.github.io/react-portfolio/) and it works!
I changed PCs, and cloned the same code from my repository (https://github.com/yanalinso/react-portfolio)
run npm install and npm start on my local machine, the images does not work anymore (logo and the background picture), but the CSS is working
https://ibb.co/4NchQJG (Result on my local machine)
https://ibb.co/RQVv6KB (Chrome console)
https://ibb.co/ZGN1cPd (File tree, same as with my other machine)
https://ibb.co/qmfwX44 (cmd run result)
My code is simple to use images
img src="img/logo1.png"
I can still push changes on GitHub page and it's working fine,
though images are not working on my local machine.
You need to import it first like this to tell webpack that JS file is using this image
import logo1 from './img/logo1.png';
and then this:
<img src={logo1} />
I tried changing to other picture but still failed,
SOLUTION!
I've restored the package.json to default, so i've removed the config of gh-page on script and removed homepage == IT WORKS!!
Thanks guys for helping :)
I have been searching around regarding this and I find this very strange. I'm a beginner and the solution I can only come back with is
import ANYNAME from "path of file e.g ../images/logo1.png".
import ANYNAME from "../images/logo1.png"
Take note ../ is to reference a file outside the folder you are in.
If in the same folder use ./
Then when you are to use it
<img src={ANYNAME}/>
rather than <img src="../images/logo1.png"/> // This line doesn't work
I used create-react-app to play with react. I noticed that no matter what I type in after localhost:3000/ (which is the default url on dev machine) I always get the content from localhost:3000
This means I cannot access images so that sort of means I can't really do anything with it.
Is this a bug or is it some awesome new feature that I just don't understand? How can this be switched off?
Create React App uses historyApiFallback for the webpack-dev-server, which means that all requests that give a 404 response will fall back to load the index.html file.
If you e.g. add an image to the public folder, you can see that the image takes precedence over the index.html file.
You can also import the image with the help of Webpack and use the import as src in your code, and Webpack will make sure the image ends up in the final build folder for you.
import img from './image.png';
you can use
render() {
return <img src={process.env.PUBLIC_URL + '/img/logo.png'} />;
}
for more information please refer Adding Assets Outside of the Module System