How to link a placeholder image in react-app - html

I am new to react. I have to link a placeholder in my react-universl static page. What is the syntax to do it? Thanks in advance. I tried
1. image src="http://placehold.it/150x150"
2. image src={"http://placehold.it/150x150"}
3. image src={require('http://placehold.it/150x150')}
Is there a way to do it? Or do i have to make changes in webpack? Thanks in advance.


The proper answer is <img src="http://placehold.it/150x150" />, just like in plain HTML.
If you are a beginner, make sure to learn HTML and JavaScript before you start learning React.


The only way to do this without manually adding the src would be running client JS to loop through all the <img>s and add the src attribute

Related

<img src> tag help - learning blazor

I am learning Blazor and at the moment I am trying to set an image as the background. I thought I would try display it first as the background-image css didnt work. I have attached a picture of my index.razor page and the img tag i am using is as follows:
<img src="file:///C:/Development/CsharpApplications/Portal/AlbertBartlettPortal/AlbertBartlettPortal/Pages/hero-range-1.jpg" alt="Background Image" />
It allows me to ctrl+click the file path and opens the image right away so it can see the image, but it wont display at all when the website is ran.
HELP!
Page Image Here

I put it in wwwroot\images and then used src="images/aaa.jg". No leading / OR ~/

how to make image with lazyloudin and style from css class?

The code doesn't work, why ?and where's the mistake? Thanks in advance.
I want to do this using css and html only! ( No js ,I want use naitve lazylouad in chrome).
<img loading='lazy' class='preview' src='images/demo/spring-8fb8662b.svg' alt=''>

Why is my image not showing up in html (I am very new to it)

I am playing around with HTML and I am trying to add and image but when I run it the it does not show.
Here Is what I have
I am very new to HTML so don't judge...

Please check the spelling of the src property. you typed "SCR". please change that to src and it will work. <img src="IMG_0901.jpg">

check you img tag
it should be <img src="IMG_0901.jpg"> not <img scr="IMG_0901.jpg">
your code has typo error "scr" attributes

Why is my logo not showing up?

I'm sure this is super easy but I'm a beginner. I have my code to pull up my logo but my logo just pulls up a broken image icon. See screencast
See screencast: http://screencast.com/t/ar8cpTIbMs
Here is my HTML:
<div id="logo">
<img src="C:\Users\Brent\Documents\Website Development"/>
</div>
I really only need my HTML figured out and I assume the CSS will work pretty well after that. Thanks for the help!

You must enter the correct file name for src. Such as
<img src="C:\path\to\your\file.jpg" />
http://www.w3schools.com/tags/tag_img.asp
Please note that it is not a good practice to use absolute paths in your src attribute.
In the other hand, you can use base64 encoded image data as src of your img tag. Something like
<img src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD...//Z" />
https://www.base64-image.de/tutorial
If you use this method, you dont need to keep your logo.jpg file anywhere.
Hope this will help.

You are linking to a directory in your img tag, instead of an image file. Also, I would suggest either practicing online in a free webhost or downloading a stack package like WAMP/MAMP/LAMP. You'll start running into problems where you can use http protocols pretty quickly in your studies. Though, that can get technical, so I say stick to a free webhost for now. You will get weird hang ups trying to use the file system that will ultimately confuse you while you are trying to learn.

The problem lies in your src for your <img>. You're linking it to a directory /Users/Brent/Documents/Website Development right now, when you should be linking it to the image. If your image is called logo.png, then you should link it with C:\Users\Brent\Documents\Website Development\logo.png. Also, instead of linking it to C:\Users\Brent\Documents\Website Development\logo.png, link it to the image based on where the file is. For example, if your file is in \Website Development\index.html, then all you need to put for the src is "logo.png".

You should move your logo to the same path as your website. Ex:
Website: C:/site/index.html
Logo: C:/site/logo.jpg
Then include the logo as:
<div id="logo">
<img src="logo.jpg">
</div>
Hint: You don't have to have the div for the logo to show up.

please enter the complete path including your image.
for example if your file name is mypic.jpg .Then
<img src="C:\Users\Brent\Documents\Website Development\mypic.jpg" />

HTML tags with spaces

so I have a strange request. I've been working on some security project for school, and I've been able to successfully inject some html code using a form on our test site. What's interesting is that it only accepts the html code as one line and with no spaces. This brings me to my question, so far I've only been able to get text and font color changes to work. But I want to see if someone could inject images/audio/video.
I'm trying to figure out how to turn this:
<img src="http://www.rtur.net/blog/image.axd?picture=2011%2F12%2Fcss.png"/>
Into this:
<imgsrc="http://www.rtur.net/blog/image.axd?picture=2011%2F12%2Fcss.png"/>
but add a space with code.
I've tried adding the but that only works with actualy text and not the tag itself. Any help is appreciated.
Interesting note: I was able to inject <font size="50" color="red"></font>
But I have no idea why that works but the image doesn't.

Have you tried the following?
A slash:
<img\ src="http://www.rtur.net/blog/image.axd?picture=2011%2F12%2Fcss.png"/>
Using a non-traditional closing tag:
<img src="http://www.rtur.net/blog/image.axd?picture=2011%2F12%2Fcss.png"></img>
Injecting a blank <img> tag:
<img src=""/>

Here's another solution: Try inline CSS:
<div style="background:url(http://www.rtur.net/blog/image.axd?picture=2011%2F12%2Fcss.png);height:400px;width:400px"></div>
See this fiddle: http://jsfiddle.net/9MYrM/