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" />
Related
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 using reactjs with the Laravel (Laravel-mix). I have my image in storage/app/public/images/slider-girl.png and referenced it on
<img src="{require('/images/slider-girl.png')}" />
but not displaying the image.
However, I have tried to put the image in resources and public folder and I get the same response. I have tried options found here but nothing seems to work for me.
<img src={url('storage/app/public/images/slider-girl.png')} />
<img src="{require('/images/slider-girl.png')}" />
I expect the image be displayed.
Go to your webpack.mix.js, add
.setResourceRoot("/");
as illustrated below
mix.react('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css')
**.setResourceRoot("/");**
Then just reference it as follows:
<img src="/images/slider-girl.png" />
I hope it helps
I have an edit profile page with html code as follow:
<img ng-src="{$root.user.userProfilePic}" />
where $rootScope.user.userProfilePic = "imageUrlHere" />
However, when i updated the userProfilePic again using controller in the same page, the profile image is still remain the same. This does not occur if i use $scope. How could i fix it?
UpdateUserProfilePicApi.then(function (res) {
$rootScope.user.userProfilePic = res.imgUrl;
});
You are missing {{double braces}}, try this:
<img ng-src="{{user.userProfilePic}}" />
ng-src docs
There is no need of using the $root.Try this :
<img ng-src="{{user.userProfilePic}}" />
This gives you expected result, because user.userProfilePic is evaluated and replaced by its value after angular is loaded.
<img ng-src="{$root.user.userProfilePic}" />
But with this, the browser tries to load an image named $root.user.userProfilePic, which results in a failed request. You can check this in the console of your browser.
You don't need to use $root as $rootScope is accessible from all the views.
Remove $root from your code.
<img ng-src="{{user.userProfilePic}}" />
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}}" />
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...
}