Below are various ways of importing an image in React JS 
<ul>
<li>Add image to your /src directory then import image and load like below
<pre><code>import star from './star.jpg';
//In your const or function
&lt;img src={star} alt="Girl in a jacket" width="50" height="50"/&gt;
</code></pre></li>
<li>Or you can load a url directly
</li>
</ul>
<pre><code>&lt;img src="http://clipart-library.com/images/zcXobAjqi.png" alt="Star" width="50" height="50"&gt;&lt;/img&gt;
</code></pre><ul>
<li>Or you can require image after adding image to your /src directory</li>
</ul>
<pre><code> &lt;img src={require('./star.jpg')} alt="Star"/&gt;
</code></pre>Happy Coding,
Asrin
If this helped you consider buying me a coffee :)
<div class="hn-embed-widget" id="buymecoffee"></div><div class="hn-embed-widget" id="amazonads"></div>

Below are various ways of importing an image in React JS 

- Add image to your /src directory then import image and load like below
```
import star from './star.jpg';
//In your const or function
<img src={star} alt="Girl in a jacket" width="50" height="50"/>
```

- Or you can load a url directly

```
<img src="http://clipart-library.com/images/zcXobAjqi.png" alt="Star" width="50" height="50"></img>
```

- Or you can require image after adding image to your /src directory

```
 <img src={require('./star.jpg')} alt="Star"/>
```

Happy Coding,
Asrin

If this helped you consider buying me a coffee :)

%%[buymecoffee]

%%[amazonads]

Import image in React JS

Software engineer focusing on PHP, JavaScript, HTML, CSS, CI/CD, GitHub, AWS, Azure &amp;  Magento Commerce. I enjoy code for good projects, tech, gym, nature, travel, fried chicken, and coffee.
