I need to display external images but image loading only works well in
ionic serve
My code is like this:
<img [src]="user?.img.url" />
or
<div *ngIf="user">
<img [src]="user.img.url" />
</div>
but the images are not been loaded in mobile
if I copy the link contained in user.img.url and write a code like this:
<img src="'https://res.cloudinary.com/ddon9fx1n/image/upload/v1567797308/rvnpdvy9dsj9ws8tiatj.jpg'" />
then it always works in ionic serve or in mobile
With some images all the above code works... I am using Cloudinary to storage media files
Related
I am doing my first steps in vapor 4 using leaf as view renderer. In my data i am pasting image urls but when I run the page the browser does not show them. The browser always shows the value of the "alt" tag.
So I tried to build a static leaf page which only shows an image from the internet but this is also not displaying the image. I can not figure out why. Do I have to set somewhere that the running test Webserver should render images? I am using macOS Big Sur 11.0.1
Here is my leaf code (it's simple html code but does not display the image)
<!DOCTYPE html>
<html>
<head>
<title>Image Test</title>
</head>
<body>
<a href="https://www.w3schools.com/tags/img_girl.jpg">
<img scr="https://www.w3schools.com/tags/img_girl.jpg" alt="test image" width="500" height="600">
</a>
</body>
</html>
As Nick said it was a speeling mistake .
I wrote „scr“, but it must be „src“
Correct:
<img src="https://www.w3schools.com/tags/img_girl.jpg" alt="test image" width="500" height="600">
I am building an Ionic2 app (actually I am learning), and am trying to apply custom css to my component, however it is not successful.
My app folder structure is as following:
My app.core.css:
#import "../pages/start/start";
#import "../pages/farmList/farmList";
#import "../pages/slider/slider";
#import "../pages/farm/farm";
My slider.component.ts
<ion-slides #mySlider [options]="mySlideOptions" id="mySlides">
<ion-slide >
<div padding>
<h1>Welcome to Swarms app</h1>
<p>Here you can view, manage and manipulate all your data</p>
</div>
</ion-slide>
<ion-slide>
<h1>Slide 2</h1>
</ion-slide>
<ion-slide>
<h1>Slide 3</h1>
<button (click)="goToHome()">Start</button>
</ion-slide>
</ion-slides>
I am trying to add some properties in slider.scss but it has no effect. How can apply some styles to it?
Also, I created a folder 'img' like www/build/img and put few images in there, but on whenever I restart my ionic app with ionic serve, the folder is vanished, WHY?
UPDATE: First problem is solved, it was a simple typo in components where it had to be styleUrls:['/slider.scss']and not styleUrls:['/slider.css']
Add a folder css in the src/assets folder. Put your css file there. In the src/index.html file, add this line
<link href="assets/css/yourCssFileName.css" rel="stylesheet">
Then you can refer to anything in the css file in your other pages as what you normally do with web pages.
Also, I created a folder 'img' like www/build/img and put few images
in there, but on whenever I restart my ionic app with ionic serve, the
folder is vanished, WHY?
When you run ionic serve all the javascript and styles files are compiled and put together (among other tasks) in your build folder, and that's why if you put somethig there, is deleted.
In order to avoid that, you should put your images in www\images and then reference them in your code by doing:
<img src="images/myImage.png" />
======================
EDIT:
You can find more information about what's going on when you run ionic serve (and also emulate, deploy and build) by taking a look at your gulpfile.js:
/**
* Ionic hooks
* Add ':before' or ':after' to any Ionic project command name to run the specified
* tasks before or after the command.
*/
gulp.task('serve:before', ['watch']);
gulp.task('emulate:before', ['build']);
gulp.task('deploy:before', ['build']);
gulp.task('build:before', ['build']);
And in the lasts lines of code of the gulpfile.js you can see this:
gulp.task('clean', function(){
return del('www/build');
});
Which is what causes the build folder to be deleted.
I am using Fancybox gallery with cushyCMS for my client. It will be useful if I can create more main images as a series of photos for particular thumbnail, but in this case I want to hide empty src images so there are no white images when pictures are extended and client doesn`t fill it.
<li>
<div class="wrap">
<a class="fancybox" rel="group1" href="images/GaleryPicSixSM.png">
<img id="thumbnailSix" class="cushycms thumbnail" src="index_15_1769179488.png" caption="thumbnail 6" />
</a>
<img id="mainPicutureSix" class="cushycms main" src="" caption="main image 6">
</div>
</li>
Is there anyway how I can hide automatically empty src in case that client will not find relevant picture ? Unfortunately there is no possibility in cushyCMS for my client to add a more pictures under one thumbnail.
If you can use jQuery, the following code would do the trick:
$('img [src=""]').hide();
I have an appgyver app that I've tried to display images via
<img src="app/common/assets/pic.jpg"/>
<img src="common/assets/pic.jpg"/>
<img src="assets/pic.jpg"/>
<img src="pic.jpg"/>
<img src="http://www.somegoogleimage.com/pic.jpg"/>
Nothing shows. I'm confused out of my wits! I've also tried ng-src directive as source. Help !
create a folder in your supersonic project
app/common/assets/images
Put your images in app/common/assets/images
src =/images/yourimage.jpg
I have a signature that is used in outlook. The signature has an image at the bottom and a link that encompasses the image. On the computers you are able to click on the image and taken to the link while on the iPhone it asks you to save image, or copy or cancel. On occasion I have noticed it to work but have not been able to determine when it does link and when it asks to copy the image.
The code is the relevant code for the image/link
<table>
<tr>
<td>
<span style="font-size: 10pt; font-family: Calibri">
<br/>
<!-- begin ad tag -->
<a href="LINK" target="_blank">
<img src="IMAGE" border="0" alt="" /></a>
<!-- end ad tag -->
</span>
</td>
</tr>
</table>
Edit 1: Just testing some more, if I go into the web browser on the IPhone and then back into the mail and click the image it goes to the link without prompting to save the image.
Edit 2: Edit 1 works only on the iphone 4 version 5.1 (does not work on 4S have not tested others). Also works on ipad 3 version 5.1
Edit 3: Also does not work on 3g iphone either version 5.1
I am going to mark this up as an iphone issue and say jme1988 is correct unless someone comes up with something else.
Thank you for your help
You have to use the map tags to make it work.
Here's an example using a facebook picture linking to facebook using map:
<img src="http://cdn2.iconfinder.com/data/icons/web2/Icons/FaceBook_128x128.png" alt="Facbook" usemap="#facebook" />
<map name="facebook">
<area shape="rect" coords="0,0,128,128" href="http://www.facebook.com" alt="Facebook" />
</map>
If you aren't familiar with this, try pasting the code in an .html document and check it out (should work). Typically you put the "mappings" just before </body> .
On the coords arguement, you should use x1,y1,x2,y2 plotting. What this means is that you want map a rectangular image from the top-left to the bottom-right of the size of the image. This appears to work on the 3G version.
I actually found a solution that works on iOS 6.1.2 as well as desktop Apple Mail (6.0):
Combine the above approaches:
<a href="http://foo">
<img src="http://bar" usemap="linkmap" alt="Click me" title="Click me"/>
<map name="linkmap">
<area shape="rect" coords="0,0,80,80" href="http://foo" alt="Click me" />
</map>
</a>
Try applying the following css to your image tag and make sure it's added as an inline style.
-webkit-touch-callout: none;
-webkit-user-select: none;
Sounds like an issue with the Iphone to me (wouldn't surprise me). The menu that pops up is likely because the Email client cannot launch the browser window when it has not already been started (hence why it works sometimes and doesn't others).
I'm not sure if my suggestion is the best practice, but the image map solution didn't work for me (iOS 6.1 on iPhone 4s).
Instead, I've just placed a transparent "a href" on top of my desired clickable image:
<a href="http://LINK" id="clickable" style="width:441px; height:244px; position:absolute; top:303px; left:46px; background-color:rgba(0,0,0,0); z-index:99">
Also, I had to leave the original "a href" around the image itself also, because the transparent link did not work on Outlook on PC.
Hope this helps.
Make sure you're linking to the image instead of using an attachment. See Why anchors tag containing an image don't work in Iphone's mail app?.