Menu
I am working on a react.js website and I want to link a image (logo) to the website. See folder structure
My image code for the footer logo is
<img className="img-responsive" src="public/assets/image/img/footer-logo.jpg" alt="logo"/>
But the image is not visible on the website when I run it. Any solutions??
975
Option 1: import the image into the component Put the image file somewhere under the src folder. This alone will not automatically make it available, so you have to import the image into the React component where you're using it. import companyLogo from './path/to/logo.
To use an image as a link in React, wrap the image in an <a> tag or a Link tag if using react router. The image will get rendered instead of the link and clicking on the image will cause the browser to navigate to the specified page.
To fetch image from API with React, we can use the fetch function. We call fetch with the imageUrl to make a GET request to it. Then we call res. blob to convert the response object to a blob.
In short: Any images that you import in your React components should be stored close to where they are used (preferably in the same directory). Any images that you do not import in your React components (e.g. favicons ) should be stored in your public/ directory, e.g. under a favicons/ folder.
If you are using webpack and assuming you are in one of the components as displayed in the image then do:
import logo from '../../public/assets/image/img/foorter-logo.jpg';
<img className="img-responsive" src={logo} alt="logo"/>
If you want to stick to what you have then you can do:
<img className="img-responsive" src="../../public/assets/image/img/footer-logo.jpg" alt="logo"/>
You image src url need to be relative to the file you are using it in. So You need to use it like ../../public/assets/image/img/footer-logo.jpg.
Also in react you need to enclose your source within curly brackets
<img className="img-responsive" src={"../../public/assets/image/img/footer-logo.jpg"} alt="logo"/>
Also if you are using webpack you need to use require with the image src url like
<img className="img-responsive" src={require("../../public/assets/image/img/footer-logo.jpg")} alt="logo"/>
I hope it helps :)
41
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
