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:
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} />
" and ".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.
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.
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}
"imagem" is string. Need variable {imagem].
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
