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}}" />
Related
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>
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 need to use data-src attribute in < div > to show an image but in react this attribute for me is not working, is there any way to fix that?
<div
data-aos="fade-up"
data-aos-easing="ease-in-out"
data-aos-duration="600"
data-aos-once="true"
>
<a href="#">
<div data-src="../../contents/images/01.jpg">
<div>
//some text here
</div>
</div>
</a>
</div>
When I tested it in simple html it is working and no problem and image shows correctly, but in react it is not Ok...
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")
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...
}