I have tried to use React scroll parallax to get the famous scrolling effect on a couple of images which works perfectly fine in chrome, but in safari and I should say on a small screen looks jittery and give the user a bad experience.
here is a sample project created in stackBitz: https://stackblitz.com/edit/react-ybdmbn.
please guide me on how I can improve it or what I am doing wrong.
I fix the issue by removing the: speed={-10} property from the <Parallax> tag.
Parallax gets a couple of property which the speed and the translateY are basically the same thing.
<Parallax translateY={[20, -70]} >
<img src="https://picsum.photos/200/300" />
</Parallax>
<Parallax translateY={[30, -90]} >
<img src="https://picsum.photos/seed/picsum/200/300" />
</Parallax>
</div>
<div className={styles.Bottom}>
<Parallax translateY={[20, -80]} >
<img src="https://picsum.photos/200/300?grayscale" />
</Parallax>
<Parallax translateY={[40, -80]} >
<img src="https://picsum.photos/id/870/200/300?grayscale&blur=2" />
</Parallax>
</div>
I'm using SvelteKit in my __layout.svelte.
I've got like:
<img src="./logo.svg" alt="logo" />
It works fine with "normal" page like about, contact etc, but it doesn't work with dynamic pages like blog/id.
How can I fix it?
UPDATE FIXED IT!
<img src="/logo.svg" alt="logo" />
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"}>
I am learning React and am facing an issue, I am not able to reference the images that I have in.
In my code directory I have src folder in which I have components and images directories.
In components I have a component called Header.js where I am trying to access an image from the src/images directory but its not getting displayed.
I have lots of images to display and I am not sure how do I achieve this.
<div className="brand">
<img
className="logo"
src= "shopping-cart/src/images/Veggy.png"
alt="Veggy Brand Logo"
/>
</div>
I have tried removing src or adding ../ but doesn't seems to work.
Can anyone please help me?
Use import to import the image
import veggy from "shopping-cart/src/images/Veggy.png";
And then pass veggy to src
<div className="brand">
<img
className="logo"
src={veggy}
alt="Veggy Brand Logo"
/>
</div>
Or use require directly
src = require("shopping-cart/src/images/Veggy.png")
I want to display images from sdcard in my Ionic application , But I got problem to show images with img tag.
View Code For My Application
<ion-content ng-controller="DigitalCatCtrl">
<div>
<img ng-src="{{myimg}}" />
<img src="{{myimgs}}" />
</div>
</ion-content>
Controller Code For My Application
.controller('DigitalCatCtrl', function($scope,$cordovaFile) {
$scope.myimg=cordova.file.externalRootDirectory + ".DigitalCatlog/ic_developmentworks.png";
$scope.myimgs="file:///storage/sdcard0/.DigitalCatlog/ic_developmentworks.png";
});
If I have pass the image path directly to img tag like following way, Image will show.
<img src="file:///storage/sdcard0/.DigitalCatlog/ic_developmentworks.png" />
Please suggest me what I did wrong or any other solution.
use
<img data-ng-src="{{myimgs}}" />
instead
<img src="{{myimgs}}" />