If I do the following :-
<asp:Image Id="img1" Height="100px" Width="100px" ImageUrl="/picture.jpg/>
the rendered html will be roughly
<img src="/picture.jpg" style="height:100;width:100"/>
I see a lot of SEO apps etc that recommends that images should be
<img src="/picture.jpg" height="100px" width="100px" />
Is there any way of forcing asp.net of using height and width attributes instead of using style attribute?
You have to do this in the code-behind file unfortunately. For example, by tying into the Page_Init as follows:
void Page_Init(object sender, EventArgs args)
{
img1.Attributes["width"] = "100";
img1.Attributes["height"] = "100";
}
Alternatively...
You could use a <img runat="server" /> tag as follows:
<img src="~/picture.jpg" height="100" width="100" runat="server" />
ASP.Net will treat it as an HtmlImage on the server.
Related
I am trying to wrap text around an image and if I use the following code:
<div className="container">
<img src={myImageSource} alt="swimmer" height="300" width="300" style="float: left" />
<p> This is where the other text goes about the swimmer</p>
</div>
Now I understand that this style="float: left" is html 5. However if I use the following code:
<div className="container">
<img src={myImageSource} alt="swimmer" height="300" width="300" align="left" />
<p> This is where the other text goes about the swimmer</p>
</div>
It works! Why can't I use style in React?
You can still use style in react. Try :
style={{float: 'left'}}
The issue is you are passing style as a String instead of an Object. React expects you to pass style in an object notation:
style={{ float:`left` }} // Object literal notation
or another way would be:
const divStyle = {
margin: '40px',
border: '5px solid pink'
};
<div style={divStyle}> // Passing style as an object
See the documentation for more info
In case if a property(e.g. 'align-self') has special characters, you need use single quotes for property name as well, e.g
style={{'align-self':'flex-end'}}
You may see a warning "Unsupported style property align-self. Did you mean alignSelf?", but the style is copied correctly to generated html align-self: flex-end;.
From the doc:
The style attribute accepts a JavaScript object with camelCased properties(style={{float: 'left'}}) rather than a CSS string (style="float: left"). This is consistent with the DOM style JavaScript property, is more efficient, and prevents XSS security holes.
So you should write it as:
<img src={myImageSource} alt="swimmer" height="300" width="300" style={{float: 'left'}} />
As other has stated. When copying from HTML, it gets string style="string: string".
You need to go style={{property: "value"}}
Adding ' before and after the style class and the value worked for me.
You can write inline style in react as style={{float: 'left'}}
And if you want to use more than one property you can use it as object as below to avoid lint errors.
const imgStyle = {
margin: '10px',
border: '1px solid #ccc',
float: 'left',
height: '300px',
width: '300px'
};
<div className="container">
<img src={imgStyle} alt="swimmer" />
<p> This is where the other text goes about the swimmer</p>
</div>
<div className="container">
<img src={myImageSource} alt="swimmer" height="300" width="300" **style={{align:'left'}}** />
<p> This is where the other text goes about the swimmer</p>
</div>
I am using asp.net for a website and i am using nested master page.
i want to load dynamic a picture from the nested master page.
the html code in the nested master page is:
<a runat="server">
<asp:Image id="usrimg" src="" alt="Image Not Found" runat="server" />
</a>
the C# code is:
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
var u = Session["user"] as Worker;
String s = "/images/" + u.UserName + ".jpg";
usrimg.ImageUrl = s;
}
}
note that the path is correct( i debug the code behind)
but always the source in the inspect is unknown.
this is the result :
<img id="userphoto_ContentPlaceHolder1_usrimg" src="" alt="Image Not Found">
i solve it by using :
usrimg.Attributes["src"] = s;
I have a DOM structure like this:
<article class="detail">
<img src="img1.jpg" />
<img src="img2.jpg" />
<img src="img3.jpg" />
</article>
If I select using
immagini = $$('article.detail').getElements('img')
console.log(immagini[0]) // returns Object { 0: <img>, 1: <img>, 2: <img> }
If I select using
immagini = $$('article.detail img')
console.log(immagini[0]) // returns <img src="img1.jpg" />
I can't understand the difference since, as the Docs say:
getElements collects all descendant elements whose tag name matches the tag provided. Returns: (array) An Elements array of all matched Elements.
Thanks for any explanation
When you use $$ you get a array-like collection of article.detail elements. So for each element found getElements will get all img.
This means a mapping of the inicial articles array-like collection you got into arrays of what getElementsfound.
Check this example:
<article class="detail" id="foo">
<img src="img1.jpg" />
<img src="img2.jpg" />
<img src="img3.jpg" />
</article>
<article class="detail" id="bar">
<img src="img1.jpg" />
<img src="img2.jpg" />
<img src="img3.jpg" />
</article>
and the JS/MooTools:
var articles = $$('article.detail')
var img = articles.getElements('img')
console.log(articles, img);
This will print:
[article#foo.detail, article#bar.detail], [Elements.Elements[3], Elements.Elements[3]]
jsFiddle: http://jsfiddle.net/akcvx8gL/
If you want just a array with all img elements you could use the whole selector 'article.detail img' inside $$ like you suggested in your other example or use .flatten() in the end (jsFiddle).
There is a related blog post about this.
"All the methods that MooTools adds to the Element native are added to the Elements class as well. You can do some pretty nifty chaining because of this. This is because any method you call on Elements, will loop through the array and try to call the method on each individual element [...] will return an array of the values from each element.".
Pretty basic question.
How simple would it be to give an image an ID tag (obvs not that part..) and count how many of the images are on the page with that tag?
As ID's should be unique on a page, you should be using a class instead:
<img src="/img/src.jpg" class="my_image" />
You could then use javascript to count the number of elements
var imgCount = document.querySelectorAll('.my_image').length;
the variable imgCount now contains the number of img tags with the class my_image
DEMO
var imgCount = document.querySelectorAll('.my_image').length;
alert(imgCount);
<img src="/img/src.jpg" class="my_image" />
<img src="/img/src.jpg" class="my_image" />
If you absolutely must use the same ID on multiple elements (maybe these are generated by some third party scripts or CRM?) the above does work (in Chrome at least). Demo below.
var imgCount = document.querySelectorAll('#my_image').length;
alert(imgCount);
<img src="/img/src.jpg" id="my_image" />
<img src="/img/src.jpg" id="my_image" />
If you're using query better to used .length.
<div id="some_id">
<img src="some_image.png">
<img src="some_image.png">
<div class="another_div"></div>
<div class="another_div"></div>
</div>
<script>
var x = $("#some_id img").length
alert(x);
</script>
Check this link.
Is there any function or command that I can use to take the "pop-up" picture from this function:
<a class="thumbnail" href="#thumb">
<img src="productURL" width="100px" height="142px" border="0" />
<span>
<img src="productURL" />
<br />
<font face="arial">productname</font>
</span>
</a>
Be displayed in a table located to the right of the page?
Notes:
I'm using Dreamweaver CS6
Maybe there's a way to put, inside a class, that the pop up has to be shown inside a table, defined earlier?
EDITED
you can do that by this
in your html table cell tag add an id
HTML
<img src = "xyz.png" onmouseover="showimage();" onmouseout="hideimage();" />
and for table
<table><tr><td id="showimage"></td></tr></table>
Javascript
function showimage()
{
document.getElemtnById('showimage').append('<img src="xyz">');
}
function hideimage()
{
var elem = document.getElemtnById('showimage');
elem.removeChild(elem.childNodes[0]);
}
Regards.