How to Correctly Load a New Logo in React?

[mathmari]

Hey!

I need some help in react.
I have a code for a web application and I want to change the logo. The logo I want to use is in the public folder, in this folder there is also a favicon with the old image. In the src folder there is a folder images with the old image. In the src folder there is also the Logo.js file. In that I have written the following :

import { useTheme } from '@mui/material/styles';
 
import logo from '/logo.png';
 
const Logo = () => {
    const theme = useTheme();
 
    return (
        <img src="%PUBLIC_URL%/logo.png" alt="abc" width="100" />
 
    );
};
 
export default Logo;

I get an error because of '/logo.png'. I have tried this also with '../../public/logo.png' but I get again an error. How is the correct way to load the new logo?

 

[FactChecker]

What does the error message say?

 

[mathmari]

What does the error message say?

WIth the command

import logo from '/logo.png';

I get the following error :

Compiled with problems:

ERROR in ./src/ui-component/Logo.js 14:0-29

Module not found: Error: You attempted to import /logo.png which falls outside of the project src/ directory. Relative imports outside of src/ are not supported. You can either move it inside src/, or add a symlink to it from project's node_modules/.

What is the correct way to do that?

 

[I like Serena]

Hey @mathmari!

Have you tried to make it just 'logo.png'?

The leading '/' indicates it should come from some root directory that is considered "unsafe". Instead it should probably just come from whatever directory is considered the top level directory where all resources are expected. You may need to move the file there, whichever directory that is.

On the other hand, you are not actually usuing the logo that you are importing, so perhaps there is no need to import it at all? Instead the file should just be at the expected location.

 

[mathmari]

Hey @mathmari!

Have you tried to make it just 'logo.png'?

The leading '/' indicates it should come from some root directory that is considered "unsafe". Instead it should probably just come from whatever directory is considered the top level directory where all resources are expected. You may need to move the file there, whichever directory that is.

On the other hand, you are not actually usuing the logo that you are importing, so perhaps there is no need to import it at all? Instead the file should just be at the expected location.

When I write just 'logo.png' I get the following error:

Compiled with problems:

ERROR in ./src/ui-component/Logo.js 14:0-28

Module not found: Error: Can't resolve 'logo.png' in 'C:\Users\...\new-frontend-main\src\ui-component'

 

[I like Serena]

When I write just 'logo.png' I get the following error:

Ah right... you are trying to import `logo.png` as if it is a source code module, but it is not.
How about deleting line 3 altogether?

 

[mathmari]

Ah right... you are trying to import `logo.png` as if it is a source code module, but it is not.
How about deleting line 3 altogether?

This works! I don't get any errors now. But the picture is not shown. Only 'abc' is shown that we get from

<img src="%PUBLIC_URL%/logo.png" alt="abc" width="100" />

What do I wrong with the image?

 

[I like Serena]

This works! I don't get any errors now. But the picture is not shown. Only 'abc' is shown that we get fromWhat do I wrong with the image?

Apparently the image file is not where it is expected.
If you right click on the image and select Inspect, what does it show for its `src` path?

 

[mathmari]

Apparently the image file is not where it is expected.
If you right click on the image and select Inspect, what does it show for its `src` path?

You mean at the side bar of Visual Studio Code I shall cright click on the name of the image?
When I copy the path I get : new-frontend-main\public\logo.png

Or do you mean somewhere else to right click?

 

[I like Serena]

You mean at the side bar of Visual Studio Code I shall cright click on the name of the image?
When I copy the path I get : new-frontend-main\public\logo.png

Or do you mean somewhere else to right click?

The code is for a web application, so the resulting code should be viewable with a browser. When you wrote that you could not see the picture, I assumed that you could not see it in a browser. Is that the case?
If so, then I meant the right click on it in the browser.

 

[mathmari]

The code is for a web application, so the resulting code should be viewable with a browser. When you wrote that you could not see the picture, I assumed that you could not see it in a browser. Is that the case?
If so, then I meant the right click on it in the browser.

When I right click in the browser it says that the loading of the image is not possible. What am I doing wrong?

 

[I like Serena]

When I right click in the browser it says that the loading of the image is not possible. What am I doing wrong?

It should be possible to right click and select inspect element. That should show a list of tab sheets and one of them shows the elements. We should see more information there. In particular we want to know from which path it tried to load the image.

 

[mathmari]

It should be possible to right click and select inspect element. That should show a list of tab sheets and one of them shows the elements. We should see more information there. In particular we want to know from which path it tried to load the image.

We have the following:

When I click on "event" we see :

 

[I like Serena]

It shows that it expects the image at %PUBLIC_URL%/logo.png, which is not a valid path. The %PUBLIC_URL% is not expanded. It should have been replaced on the server side somehow. You might try to just leave it out completely, or otherwise replace it by a path to where the image actually is.

 

[pbuk]

It shows that it expects the image at %PUBLIC_URL%/logo.png, which is not a valid path. The %PUBLIC_URL% is not expanded. It should have been replaced on the server side somehow. You might try to just leave it out completely, or otherwise replace it by a path to where the image actually is.

There is no server side (unless you are building for Next.js). %PUBLIC_URL% should be replaced in the build stage by create react app, although you often don't need it at all.

Here is a guide to achieving what you want: https://create-react-app.dev/docs/adding-images-fonts-and-files/

PhysicsForums is not a great place to look for front-end framework advice (unless it's for Vue of course )

 

[pbuk]

import { useTheme } from '@mui/material/styles';

// This is wrong: you are trying to import from the filesystem root!
// import logo from '/logo.png';
// Instead you want:
import logo from './logo.png';
// Or even better keep your logo.png file in a subfolder of ./src and (assuming the current
// file is src/ui-component/Logo.js) use:
import logo from '../assets/img/logo.png';
 
const Logo = () => {
    const theme = useTheme();
 
    return (
        // This is wrong - logo.png is a literal string here:
        <img src="%PUBLIC_URL%/logo.png" alt="abc" width="100" />
        // Instead write {logo} to refer to the imported file as a template variable:
        // Edit: the following line was originally posted with "{logo}" in quotes which was wrong.  
        <img src={logo} alt="abc" width="100" />
    );
};
 
export default Logo;

 

[mathmari]

We have the following files:

I created a folder and called it img and moved the png file there but I still don't get the image as a result.

Why do I not see the image at the browser? What is wrong?

 

[I like Serena]

Why do I not see the image at the browser? What is wrong?

Which code did you use now?

What does Inspect element show in the browser now as the src path of the <img> element?

 

[mathmari]

Which code did you use now?

What does Inspect element show in the browser now as the src path of the <img> element?

I created a folder img and moved the logo.png there and I used the code:

import { useTheme } from '@mui/material/styles';
import logo from './assets/img/logo.png';
 
const Logo = () => {
    const theme = useTheme();
 
    return (
        <img src="{logo}" alt="abc" width="100" />
    );
};
 
export default Logo;

At the Inspect I get :

What does that mean?

 

[I like Serena]

The text {logo} has not been expanded. I'm not sure why. Which command did you use to build and run the web application?

Suppose you add console.log(logo) after line 2 as shown in the example that @pbuk pointed out. What do you get in the logging then? You can see the logging if you right click, select Inspect, and select the Console tab sheet.

You might try to replace {logo} in line 8 by logo.png, or perhaps /assets/img/logo.png to see if the image will show up then.

 

[pbuk]

Sorry, {logo} should not be in quotes in my post

 

[pbuk]

Now I have seen your file layout everything changes. We can use the method described in https://create-react-app.dev/docs/using-the-public-folder (with the disadvantages noted there).

// You are not using anything from the theme so there is no need to import it.
// import { useTheme } from '@mui/material/styles';

// You don't need to import a file that is in `public`.
// import logo from '/logo.png';
 
const Logo = () => {
    // You are not using this so delete it (your lint tool should have warned about this).
    // const theme = useTheme();
    return (
        <img src="%PUBLIC_URL%/logo.png" alt="abc" width="100" />
    );
};
 
export default Logo;

In other words, just this.

const Logo = () => {
    return (
        <img src="%PUBLIC_URL%/logo.png" alt="abc" width="100" />
    );
};
 
export default Logo;

Keep the image file at public/logo.png.

 

[pbuk]

However you can also do this, described at https://create-react-app.dev/docs/adding-images-fonts-and-files, which has advantages (notably if logo.png is small enough it will be inlined instead of referenced which makes your site load faster).

# Set up your files like this
assets/img/logo.png
src/ui-component/Logo.js

Now write your component as:

// Not sure if you need this but it is in the boilerplate in the docs.
import React from 'react';
// We need a relative reference from the location of this file.
import logo from '../assets/img/logo.png';

function Header() {
  return <img src={logo} alt="Logo" />;
}

export default Header;

 

[pbuk]

For those of you not familiar with modern JavaScript front-end frameworks thinking "what on Earth is going on here", a brief explanation. Look up the italicised words to delve deeper.

Modern front-end frameworks use a module bundler to turn the code you write into a bundle of assets that are deployed as the application. The code you write is mainly JavaScript (or TypeScript), but the module bundler has plugins that let you work with files that are not JavaScript (e.g. CSS and image files), and also plugins that let you write code in other syntaxes (e.g. JSX or TypeScript) that is transpiled by the plugin into JavaScript.

The most common module bundler is currently Webpack and here we are using two Webpack plugins that are included in the build tool default configuration for the framework we are using here, React:

• an image loader plugin that realizes that when you type
  
  import logo from '../assets/img/logo.png';
  you are referring to an image file and so it creates the variable logo as an object with an appropriate toString() method yielding a URI. The plugin also tells Webpack to add the referenced file to its list for copying into the distribution bundle (unless the image is small and the plugin has created a data URI for inlining).
• a transpiler plugin for the template language that is normally used with React, JSX. The transpiler converts
  
  return <img src={logo} alt="Logo" />;
  into valid JavaScript: this could be something like
  
  return `<img src=${logo} alt="Logo" />`;
  but it is actually more complicated than that: lookup the JSX documentation if you are interested.