Logos are important in every website. They give your website an identity. We can add logos to our website using one of following methods:
The import keyword method
The path method
import keyword methodIn this method, we place the logo in a different folder with any name. In our case, we named it images. We use the import keyword to reference the folder containing the logo.
Let’s look at a coding example to learn more about this:
const reportWebVitals = onPerfEntry => {
if (onPerfEntry && onPerfEntry instanceof Function) {
import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
getCLS(onPerfEntry);
getFID(onPerfEntry);
getFCP(onPerfEntry);
getLCP(onPerfEntry);
getTTFB(onPerfEntry);
});
}
};
export default reportWebVitals;
Line 1: We import the logo from images folder using import keyword.
Line 2: We import the App.css file for the styling.
Line 10: We add the img tag, we called our logo using the src attribute, and fix its height and width of 100px.
path methodIn this method, we place the logo in a different folder with any name. In our case, we named it images. We will call the logo by providing its complete path in the src attribute of the img tag.
Let’s look at a coding example to learn more about this:
const reportWebVitals = onPerfEntry => {
if (onPerfEntry && onPerfEntry instanceof Function) {
import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
getCLS(onPerfEntry);
getFID(onPerfEntry);
getFCP(onPerfEntry);
getLCP(onPerfEntry);
getTTFB(onPerfEntry);
});
}
};
export default reportWebVitals;
We first create an images folder inside our public folder.
Line 1: we import the App.css file for the styling.
Line 2: We add the img tag, provide the path of the logo in the src attribute, and fix its height and width of 100px.
We have successfully added a logo to our React project.