CODEWITHSUNDEEP
htmlreactjsweb
Nunofernandes.official
Nunofernandes.official

Reputation: 167

HTML image not loading the image src

Hey guys I'm making a TodoApp in react js, and I have a simple layout and I wanted to add a few images to the app. But when I add the images it is not loading that image.

Here is the code

import TodoList from './components/TodoList';
import imagem from './skate.png'


function App() {
  return (
    
    <div className="todo-app">
        <TodoList />
        <img src="imagem"/>
    </div>
  );
}

export default App;

And here is an image of what´s happening:

Upvotes: 1

Views: 487

Answers (6)

Ahmad Hassan
Ahmad Hassan

Reputation: 64

when you use qoutes "" in jsx, it consumes it as a string and when you use {}, it consumes it as normal JS, so in your case, if you use

<img src={imagem} />

that would solve your problem

Upvotes: 1

Tomas Mota
Tomas Mota

Reputation: 679

So, In React.js (jsx) things don't work quite like HTML. WHat you are doing is importing the image from its location, by using: import image from './skate.png';

and then, inside of your function. If you import anything (image, css file, json file), for you to be able to use it you need to call it.

for example:

import JsonData from './data.json'

function App(){
return(
  <div>
    <JsonData/>
  </div>
)

}

To call it. SO in you case, you just need to replace to

and it should work.

Upvotes: 2

Aniketh Malyala
Aniketh Malyala

Reputation: 2670

The problem with your code is that

"imagem"

is read as a String. To read it as an image, place {} around it as so:

{imagem}

Upvotes: 2

Quentin
Quentin

Reputation: 944216

When using an bundler (like Parcel or Webpack) to handle images, you need to remember that the imported value is a variable.

You pass variables to props with { and }. Using a pair of " gives you a hardcoded string.

    <img src={imagem} />

Upvotes: 4

zswqa
zswqa

Reputation: 914

"imagem" is string. Need variable {imagem].

Upvotes: 1

Pete
Pete

Reputation: 3451

How about if you do this:

<img src={imagem} />

otherwise, it gets interpreted as a string and you have no http://../imagen on your site.

Upvotes: 2

Related Questions