I'm currently working on a PWA app which is written in React.js and I'm using VScode editor. I have read the AMP docs in which it is written that replace your HTML media tags with AMP equivalent AMP media tags. But when I'm replacing <img src="" alt="" /> with <amp-img src="" alt="" ></amp-img>, my vscode editor is auto correcting it to <amp-img src="" alt="" /> which is resulting in
status: AMP Validation FAILED
and in web-view, my images are not visible due to this issue.
Please help.
In addition to #Bachcha Singh's comment, you may want to check this link to validate AMP pages. Also, you can't just convert your site into an AMP just by replacing few tags. Your site must follow AMP HTML specification. Check this thread. You may also check this tutorial on how to combine AMP and PWA.
Related
I am building a project with Next.js and Strapi as CMS, the images are hosted on Cloudinary.
My problem is that the SVG image doesn't display using Image tag from Next.js.
I already read this topic Can't import SVG into Next.js but it's for locally stored images and doesn't seem to work for remote hosted SVG images.
My build is in Gatsby with Forestry.io as CMS and images hosted on cloudinary, but but my issue was solved by adding the fl_sanitize flag mentioned in this article from cloudinary support.
I know this is a bit old but stumbled across this post
I put out a Cloudinary integration for Next.js that wraps the Image component and you're able to handle this nicely
Next Cloudinary: https://next-cloudinary.spacejelly.dev/
Given an asset cloudinary-logo-blue that's uploaded as an SVG:
<CldImage
width="500"
height="96"
src="cloudinary-logo-blue"
format="svg"
/>
Hope this helps!
I have a portfolio site deployed at github pages and I used jekyll to create it. The issues that I have : 1)The responsive design at mobile it's not right and I also can't see footer, 2) I have broken images that doesn't load i have changed the path several times but still doesn't work i guess I'm out of options?Any suggestions to fix these issues? My site : https://lazospap.github.io/LazPap/ and my repo : https://github.com/LazosPap/LazPap .
To make sure that the image urls are found, you can tell Jekyll where the image is before processing using the link tag. Jekyll will track the link of the image before and after processing, so you can rely on your repo's current structure instead of the structure after processing.
<img src="{% link images/CSS_3.png %}" class="background-image-right"/>
Docs on link tag
Another tip is to create a .gitignore, add the following files to the .gitignore and then delete them from being tracked by git. You don't need them in your source control.
// .gitignore
.jekyll-cache
_site/
When I run your repo locally and make the browser mobile responsive, the images are not shrinking down. But, I can see your footer. I'm not familiar with the framekworks you're using, though.
Instead of using link, you can also do this:
<img src="{{ '/images/CSS_3.png' | prepend: site.baseurl }}" class="background-image-right"/>
Am facing a issue with ionic. here, how to load gif image in <image src="icon.gif"> in a html page.
its working in browser but not in mobile or device.
can any one help me.
You only need to put the following HTML tag with the complete URL of your GIF image:
<img ng-src="{{yourGifURL}}" alt="Description" />
Make sure you using the file name as case sensitive like 'loading.gif' or 'Loading.gif'.
And also use the <img src="">
I was having a similar issue.
So I am using a JSON that returns a lot of data about the user including pictures. The problem I am facing is that I believe the relative path to the images folder is correct however for some reason it is saying in ng-source="relativePath" instead of the image. The only conclusion I can come to is either the path is wrong or there is some sort of import I must do for the images to be used in the project.
<div ng-repeat="results in userInfo.images">
<figure class="img">
<img data-ng-source="{{results.imageUrl}}" ng-alt="{{results.name}}" ng-title="{{results.name}}" />
</figure>
</div>
I have tried source, ng-source, and data-ng-source. When I view in console and on the html for image src it shows the relative path /images/profilePicture.png.
My project has the following structure:
Repositry Name
app
css
home
home.module.js
home.tpl.html
images
profilePicture.png
js
resources
app.js
index.html
Using best practices the index.htlm is the container for the single page application. We are using the home.tpl.html page that is injected into the index.html container page.
I have tried switching the path to go directly from index.html -> /images/profilePicture.png as well as from home.tpl.html -> ../images/profilePicture.png.
I could not find any posts relevant to my situation but I believe perhaps you need an app.use or some sort of injection method to add the folder of images to be able to be used?
Note: I am not sure if this is helpful however when I run grunt build instead of serve I check the dist folder and the image folder does in fact have all of the images.
Change your <img data-ng-source declaration to just use ng-src:
<img ng-src="{{results.imageUrl}}" ng-alt="{{results.name}}" ng-title="{{results.name}}" />
More details at w3schools: ng-src
I have developed Hybrid app using Ionic(Angular) and trying to display image in image tag, folllowing is the code.
<ion-content>
<img ng-src="{{product.ProductMediaItems[0].MediaSrcURL}}" Width="100%">
</ion-content>
In dom element image tag looks following -
<img src="https://modpizza.com/wp-content/uploads/2013/10/whats-your-mod.png" Width="100%">
Issue -
Image is not displaying in windows app, while it is working in Android and IOS.
If I try to change the image url and to some other website image path after inspecting the app in visual studio image is loading fine.
Not sure it is a issue with particular website "https://modpizza.com/" or Ionic with windows app.