I typed <img src= {'https://robohash.org/${id}?size=300x300'}alt="photo" /> on my React js file,
after I saved the file and I got an error message on GitBash saying ,
Redundant alt attribute. Screen-readers already announce 'img' tags as an image. You don’t need to use the words 'image', 'photo,' or 'picture' (or any specified custom words) in the alt prop jsx-a11y/img-redundant-alt
Then I removed the alt from the code, and I got the error message saying,
img elements must have an alt prop, either with meaningful text, or an empty string for decorative images jsx-a11y/alt-text
How can I fix this problem?
<img src= {'https://robohash.org/${id}?size=300x300'}alt="something" />
'something' diffrent from the words 'photo' and 'image' (or any specified custom words).
I tried this one and it worked:
<input type="image" img src = {'https://robohash.org/${id}?size=300x300'} alt="photo" />
(I have used `` not the single quotation marks for the url)
I have same error issues in my react app. You can try this following codes.
❌ not work
<img src={`https://robohash.org/${id}?size=300x300`} alt="photo" />
It's also not work.
<img src={`https://robohash.org/${id}?size=300x300`} alt="Photo by John Doe" />
Don't use alt that contain keywords : photo, image, or picture.
✅ work
For example: (change alt tag with some image description without keyword)
<img src={`https://robohash.org/${id}?size=300x300`} alt="cutest kitten" />
Maybe, empty alt is alternative option.
✅ work
<img src={`https://robohash.org/${id}?size=300x300`} alt="" />
Thanks.
it's actually saying that inside your alt you don't need to use words like image, photo, or picture.
Example:
instead of
<img src="#" alt="photo"/>
try this :
<img src="#" alt="souvenir"/>
I put souvenir as an alt but you can choose any others words that describe well your image
Declare one keyword like
let alText = 'photo'
and use
<img src= {'https://robohash.org/${id}?size=300x300'} alt={alText} />
From this to
<img className="card-img" src={'https://www.shutterstock.com/'} alt="Card image" />
This->
<img className="card-img" src={'https://www.shutterstock.com/'} alt="" />
Here we have to change the alt tag value other than image, photo or picture
Try this:
Change alt="photo" to alt={"photo"}
Example:
<img src="{picture}" alt={"Card Image"}>
Related
The image is not showing in webpage.
Image code I am using
<img src={{uri: ConfigFile.ImageBaseUrl + carImage}} alt="new xuv's" />
And the output showing in the browser is
<img src=[object object] alt="new xuv's" />
If I am correct you are passing object as URL? So react sees it as object, try to do something like:
<img src={ConfigFile.ImageBaseUrl + carImage} />
Should see it as a string and should load it correctly :)
You don't have to pass an object to src, You can pass the image URL.
<img src={ConfigFile.ImageBaseUrl + carImage} alt="new xuv's" />
I am using a set if images in a row. There is a text box input above these images and based on the input i need to enable/disable images?
How to do this in React.
I tried adding "disable" to image tag and disabled=true but both didn't work.
const IBox = props =>
<div style={props.styles.imageContainer} >
<img id="image1" src={require('../../../public/images/image1.jpg')} alt = "Image1" /><span > </span>
<img id="image2" src={require('../../../public/images/image2.jpg')} alt ="Image2" /><span> </span>
<img id="image3" src={require('../../../public/images/image3.jpg')} alt ="Image3" /><span> </span>
<img id="image4" src={require('../../../public/images/image4.jpg')} alt ="Image4"/>
</div>
export default IBox;
There is no such thing as "disabling" images. You can only disable form elements, as they are the only interactive html elements. See w3c specification to see which items can be disabled exactly.
That is unless you write your own custom definition for disabling images. For example, you could add a class disabled to the image, and style that class to be greyed out, using CSS.
You could also combine CSS with WebComponents to have an element that with a disabled attribute. You could style its disabled style.
See also docs for the <img /> tag.
If you mean hide/show.. you simply may use state to disable your image i.e.
{this.state.img1 && <img id="image1" src={require('../../../public/images/image1.jpg')} alt = "Image1" />}
if by disable you mean to make it like grey, low opacity,etc... you may use an state :
style= this.state.disable? {{style_disable}}: {{style_enable}}
Use <input /> instead of <img /> as in this example.
You can provide the same functionality with the type="image" attribute. This way you can use the disabled attribute.
<input
type="image"
disabled={disabled}
/>
A completely noob question, sorry. I'm using dva to generate a project. If I want to create an <img /> tag, I can get the SRC for the asset like this:
<img src={require('../assets/card-cultural.png')} alt="" />
This works properly. However, I need to generate this code:
<picture>
<source srcset="assets/card-cultural.png, assets/card-cultural#2x.png 2x" />
<img src={require('../assets/card-cultural.png')} alt="" />
</picture>
Notice the srcset value on source. How would I generate that string using require?
Regarding the use of ng-src in order to display an image, this code works during runtime - but not on the initial page load:
<div class="imageHolder" ng-click="openWidgetSettings(widget);" ng-show="widget.showInitImage">
<img ng-src="../../Images/{{widget.initImage}}" />
<div class="caption">Click to configure</div>
</div>
on my initial page load I get the error:
GET http://localhost:33218/Images/ 403 (Forbidden)
Yet during runtime, when I drag and drop an image onto my dashboard, the front end doesn't complain anymore.
I do realize that the dashboard framework I'm using is dynamically adding a div onto my page, and then rendering the image; however, why does it NOT complain at this time ?
In other words, I'm trying to avoid using the full path like this:
<img ng-src="http://localhost:33218/Images/{{widget.initImage}}" />
**** UPDATE ****
This bit of code works, and I did not need to specify ".../../" relative path.
<div class="imageHolder" ng-click="openWidgetSettings(widget);" ng-hide="widget.gadgetConfigured">
<img ng-src="Images/{{widget.initImage}}" />
<div class="caption">Click to configure</div>
</div>
In addition, my {{widget.initImage}} was coming back empty upon reload - an application bug !
Change you code to following.
You need to check widget.initImage is initialized or not. Before passing it to ng-src .
Use ng-if on widget.initImage
<div class="imageHolder" ng-click="openWidgetSettings(widget);" ng-show="widget.showInitImage">
<img ng-src="../../Images/{{widget.initImage}}" ng-if="widget.initImage" />
<div class="caption">Click to configure</div>
</div>
I'd suggest you to use ng-init directive like this...
<div class="imageHolder" ng-click="openWidgetSettings(widget);" ng-show="widget.showInitImage" ng-init="getImgUrl()">
<img ng-src="{{myImgUrl}}" />
<div class="caption">Click to configure</div>
</div>
In your controller,
$scope.getImgUrl=function()
{
$scope.myImgUrl= //get your img url whatever it is...
// You can also set widget.showInitImage variable here as well...
}
I need to display the title and the alt of my picture in my fotorama carousel.
I take the alt and the title in the but when my page is loaded, fotoroma hides (or deletes) the alt and title. I don't know where the option to show my attribute is.
Does anyone know where the function or option for this is?
Thanks
Frink
A simple solution for this issue.
In order to show the Alt and Title in image use the image with in DIV.
Use :
<div><img src="http://www.example.com/image.png" alt="My Alt" title="My Title"/></div>
Instead of :
<img src="http://www.example.com/image.png" alt="My Alt" title="My Title"/>
Fotorama 3.0.8 uses the alt attribute:
<div class="fotorama">
<img src="1.jpg" alt="One">
<img src="2.jpg" alt="Two">
</div>
Enable captions with:
<script>
fotoramaDefaults = {
caption: 'overlay' // or 'simple' or 'none'
}
</script>
Fotorama 4.4.8 uses the data-caption attribute:
<div class="fotorama">
<img src="1.jpg" data-caption="One">
<img src="2.jpg" data-caption="Two">
</div>
Enable captions with:
<script>
fotoramaDefaults = {
captions: true
}
</script>
for use title and alt use this patched fotorama.js
/*!
* Fotorama 4.6.4 patched alt title | http://fotorama.io/license/
* https://github.com/artpolikarpov/Fotorama + patch
*/
Replace this
f=n(c.width||a.attr("width")),g=n(c.height||a.attr("height"));d.extend(c,{width:f,height:g,thumbratio:S
to
f=n(c.width||a.attr("width")),g=n(c.height||a.attr("height")),x=a.attr("alt"),y=a.attr("title");;d.extend(c,{width:f,height:g,alt:x,title:y,thumbratio:S
and
this
t.on("load",q).on("error",o)),m.state="",s.src=w}}})}function Qb
to
t.on("load",q).on("error",o)),m.state="",s.alt=m.data.hasOwnProperty('alt')?m.data.alt:'',s.title=m.data.hasOwnProperty('title')?m.data.title:'',s.src=w}}})}function Qb