CODEWITHSUNDEEP
htmlreactjsimageaudiojsx
Roberto Aguiar
Roberto Aguiar

Reputation: 9

How to show image and audio on React.js

I have a flash drive with songs and photos stick on my router, shared on my Wi-Fi, and an html file to display it like a page.

<audio controls> 
  <source src="the path" type="audio/mpeg">
</audio>

For the image <img scr=""></img>.

I'm trying to make it in react.js

All answers involve props, imports, GitHub projects installs and the like. Is there a simple way to display an image or mp3 file with JSX?

localhost3000 shows image as broken, even with the files on the same computer.

Upvotes: 0

Views: 891

Answers (2)

Dedi
Dedi

Reputation: 91

for to add image the first time is import the image like this

import logo from './logo.png'; // path location of image file in same folder project

after that you can put the image with this code

<img src={logo} alt="Logo" />

Upvotes: 0

Nizar
Nizar

Reputation: 722

It's very easy to achieve, you're almost there. The following code works (you forgot to close the source tag)

 <audio controls> 
    <source src={audio} type="audio/mpeg"/>
  </audio>

You'll have to import your audio file also before passing it into src. This is my import:

import audio from 'assets/audio/song.mp3'

For me, song.mp3 was stored in my assets directory. I imported it as audio which is a completely arbitrary name, it could be whatever you want as long as you make sure to pass the same name to src.

Edit: the src attribute can also take a url. So this will work too:

 <audio controls> 
        <source src="https://file-examples-com.github.io/uploads/2017/11/file_example_MP3_700KB.mp3" type="audio/mpeg"/>
      </audio>

Upvotes: 0

Related Questions