React - load new image - error - part 2

[mathmari]

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;

It works with this code! If I want to write a text next to the image do I use <div> ?

I mean :

    return <div><div><img src={logo} alt="Logo" width="40" /></div><div>Title</div></div>;

 

[I like Serena]

If I want to write a text next to the image do I use <div> ?

    return <div><div><img src={logo} alt="Logo" width="40" /></div><div>Title</div></div>;

That should work yes.

The inner <div> around the <img> seems a bit redundant though, and as an alternative for the title you might also use <p>Title</p>.

 

[pbuk]

It works with this code! If I want to write a text next to the image do I use <div> ?

Laying out text and images depends on what CSS framework you are using (Bootstrap?) so you would be best to check out the documentation for that. If you do want to ask here you could start a new thread but I really think you would be better off learning some more of the basics first. You could try starting with the links in this blog post https://blog.logrocket.com/using-bootstrap-with-react-tutorial-with-examples/

 

[mathmari]

That should work yes.

The inner <div> around the <img> seems a bit redundant though, and as an alternative for the title you might also use <p>Title</p>.

It doesn't work, the text appears under the image.

I changed it now to :

import React from 'react';
import logo from '../assets/img/logo.png';
const Logo = () => {
    return (
        <div>
            <img src={logo} alt="abc" width="30" />
            <h3>Titel</h3>
        </div>
    );
};
export default Logo;

but again the titel is under the image. What am I doing wrong?

 

[I like Serena]

It doesn't work, the text appears under the image.

but again the title is under the image. What am I doing wrong?

Where do you want the title? I assumed you wanted it below the image.

The tags <div>, <p>, and <h3> are all block-style tags, which means they always start on a new line and can take up all of the horizontal space.
If you want the title to be to the right, you can use <span> or no tag at all.
The behavior of any of those tags can also be overruled with CSS. You can then use for instance the style inline-block.

 

[mathmari]

Where do you want the title? I assumed you wanted it below the image.

The tags <div>, <p>, and <h3> are all block-style tags, which means they always start on a new line and can take up all of the horizontal space.
If you want the title to be to the right, you can use <span> or no tag at all.
The behavior of any of those tags can also be overruled with CSS. You can then use for instance the style inline-block.

I wrote now:

const Logo = () => {
    return (
        <div lass="box">
            <img src={logo} alt="logo" width="35" vertical-align="middle" />
            <span>TItel</span>
        </div>
    );
};

The titel is now next to the image, but is it possible that the Titel is next to the center of the image and not at the bottom?

 

[I like Serena]

I wrote now:

const Logo = () => {
    return (
        <div lass="box">
            <img src={logo} alt="logo" width="35" vertical-align="middle" />
            <span>TItel</span>
        </div>
    );
};

The titel is now next to the image, but is it possible that the Titel is next to the center of the image and not at the bottom?

Then the title must be in a container with the same height as the image, and it must be vertically aligned to the middle.
We can achieve that with for instance <table><tr><td><img src={logo}></td><td>Title</td></tr></table>.

 

[pbuk]

We can achieve that with for instance <table><tr><td><img src={logo}></td><td>Title</td></tr></table>.

No, please not a table. Tables are used for tabulating things, not laying them out.

Writing HTML like this for React would be like writing cuneiform on a word processor.

 

[mathmari]

Then the title must be in a container with the same height as the image, and it must be vertically aligned to the middle.
We can achieve that with for instance <table><tr><td><img src={logo}></td><td>Title</td></tr></table>.

It works in that way!

 

[mathmari]

No, please not a table. Tables are used for tabulating things, not laying them out.

Writing HTML like this for React would be like writing cuneiform on a word processor.

So is it wrong to use tables there?

 

[pbuk]

Yes it is wrong.

Tables must not be used as layout aids. Historically, some Web authors have misused tables in HTML as a way to control their page layout. This usage is non-conforming, because tools attempting to extract tabular data from such documents would obtain very confusing results. In particular, users of accessibility tools like screen readers are likely to find it very difficult to navigate pages with tables used for layout.

Tables should not be used purely as a means to layout document content as this may present problems when rendering to non-visual media. Additionally, when used with graphics, these tables may force users to scroll horizontally to view a table designed on a system with a larger display. To minimize these problems, authors should use style sheets to control layout rather than tables.

 

[mathmari]

Yes it is wrong.

So what do you suggest using instead?

 

[pbuk]

So what do you suggest using instead?

You could try something like this:



Note that the "guts" of this is the HTML shown below. You will need to include the CSS for Bootstrap 5 using instructions like the ones I linked to earlier: https://blog.logrocket.com/using-bo...ples/#add-bootstrap-react-using-bootstrap-cdn.

<div class="d-flex my-4">
  <div class="flex-shrink-0">
    <img src="https://via.placeholder.com/100" alt="An example image">
  </div>
  <div class="flex-grow-1 ms-3">
    <h2 class="h5">Top aligned by default</h2>
    Smaller images can keep the description on the same row even on mobile.
  </div>
</div>

<div class="d-sm-flex my-4 text-center text-sm-start align-items-center">
  <div class="flex-shrink-0">
    <img src="https://via.placeholder.com/320x180" alt="An example image">
  </div>
  <div class="flex-grow-1 ms-sm-3 mt-3 mt-sm-0">
    <h2 class="h5 d-none d-sm-block">Centered using
      <code>align-items-center</code></h2>
    Wider images should have a responsive layout so they move the description
    underneath on mobile.
  </div>
</div>

 

[I like Serena]

As an alternative, we can do:

<div><img src={logo} style="vertical-align: middle;">Title</div>

The key is that the image itself must have a vertical alignment style. The text follows suit.

 

[mathmari]

You could try something like this:



Note that the "guts" of this is the HTML shown below. You will need to include the CSS for Bootstrap 5 using instructions like the ones I linked to earlier: https://blog.logrocket.com/using-bo...ples/#add-bootstrap-react-using-bootstrap-cdn.

<div class="d-flex my-4">
  <div class="flex-shrink-0">
    <img src="https://via.placeholder.com/100" alt="An example image">
  </div>
  <div class="flex-grow-1 ms-3">
    <h2 class="h5">Top aligned by default</h2>
    Smaller images can keep the description on the same row even on mobile.
  </div>
</div>

<div class="d-sm-flex my-4 text-center text-sm-start align-items-center">
  <div class="flex-shrink-0">
    <img src="https://via.placeholder.com/320x180" alt="An example image">
  </div>
  <div class="flex-grow-1 ms-sm-3 mt-3 mt-sm-0">
    <h2 class="h5 d-none d-sm-block">Centered using
      <code>align-items-center</code></h2>
    Wider images should have a responsive layout so they move the description
    underneath on mobile.
  </div>
</div>

Using this code the title appears under the image. But why?

 

[mathmari]

As an alternative, we can do:

<div><img src={logo} style="vertical-align: middle;">Title</div>

The key is that the image itself must have a vertical alignment style. The text follows suit.

Using this code the broswer shows me just a white page. But why?

 

[pbuk]

Using this code the title appears under the image. But why?

If both titles appear under the image you have probably not included the Bootstrap CSS file in the head of your index.html with the link tag described at https://blog.logrocket.com/using-bo...ples/#add-bootstrap-react-using-bootstrap-cdn (if the words align-items-center is not shown in red this is certainly the case).

 

[pbuk]

Using this code the broswer shows me just a white page. But why?

No idea. Clearly you have done something basic wrong, at a guess you have not closed a tag properly. Is there a message shown in the browser console?

I'm beginning to think that you are "in over your head" with this, you need to go back to the basics and do a course learning HTML and CSS before you start doing anything in React. What are you trying to achieve anyway: do you even need React?

 

[I like Serena]

Using this code the broswer shows me just a white page. But why?

Right-click and Inspect?

 

[I like Serena]

I'm beginning to think that you are "in over your head" with this, you need to go back to the basics and do a course learning HTML and CSS before you start doing anything in React. What are you trying to achieve anyway: do you even need React?

I believe the "point" of React is that it is easy to quickly create a website.
Of course React also has more advanced concepts, but it is not required to use them.
As for the CSS, it is not trivial to get a title vertically aligned to the right of an image, simple as that may seem at first.

 

[mathmari]

As an alternative, we can do:

<div><img src={logo} style="vertical-align: middle;">Title</div>

The key is that the image itself must have a vertical alignment style. The text follows suit.

When I delete the part style="vertical-align: middle;" it works properly.

 

[I like Serena]

When I delete the part style="vertical-align: middle;" it works properly.

Perhaps a closing quote or an angled bracket was missing?
We can check if we inspect the generated html.

 

[mathmari]

As an alternative, we can do:

<div><img src={logo} style="vertical-align: middle;">Title</div>

The key is that the image itself must have a vertical alignment style. The text follows suit.

The style must be in {{.}}, i.e.

style={{ verticalAlign: 'middle' }}

Now it works!

 

[pbuk]

I believe the "point" of React is that it is easy to quickly create a website.
Of course React also has more advanced concepts, but it is not required to use them.

The point of React is that it is easy to quickly create a web application, or at least a website with dynamic content.

But before we can create a website with dynamic content we need to know how to create a website with static content.

And if we don't need dynamic content (there is nothing dynamic in what we have seen so far) then we don't need a front end framework.

As for the CSS, it is not trivial to get a title vertically aligned to the right of an image, simple as that may seem at first.

Indeed. This is why I recommend a CSS framework.

 

[mathmari]

Is there a way to make a word more bolder than " fontWeight: 'bold' " does?

 

[pbuk]

Maybe, depending on your browser and any fonts that you have loaded: https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight

 

[mathmari]

Maybe, depending on your browser and any fonts that you have loaded: https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight

I don't see any change when I write fontWeight: '900' instead of fontWeight: 'bold'. So do I do something wrong?

 

[pbuk]

Your browser needs to have access to a font with an appropriate weight. This is often handled by the UI framework; for MUI see https://mui.com/material-ui/react-typography/#install-with-npm

Hint: you probably want

import '@fontsource/roboto/900.css';

 

[mathmari]

Your browser needs to have access to a font with an appropriate weight. This is often handled by the UI framework.

I haven't really understood what you mean. Could you explain that further to me?

 

[pbuk]

I haven't really understood what you mean. Could you explain that further to me?

Sorry, I hit post before I had added a link, look again.

 

[mathmari]

Sorry, I hit post before I had added a link, look again.

Ah ok! 900 is the top, right? There is no way to make it bolder, is there?

 

[pbuk]

Ah ok! 900 is the top, right?

I believe so: https://www.w3.org/TR/CSS21/fonts.html#font-boldness

There is no way to make it bolder, is there?

You could use a different font: https://fonts.google.com/?category=Display

 

[mathmari]

Great! Thank you!