I want to use https://quickchart.io/ API to generate chart images and I want to insert them into a Laravel PDF report created with barryvdh/laravel-dompdf. I am creating the URL for the quickchart.io API and it works correctly, if I put it in the browser's address bar the image of the chart is returned just fine. But I can't insert it into the PDF report because I get this error: "Image not found or type unknown". And that is quite understandable because the URL doesn't simply contain an image name like "my-image.png". I am trying to use this markup in the PDF view: <img src="{{ $ga_UsersCpcChartUrl }}" alt="google analytics chart">. I already set the line: "enable_remote" => true inside the dompdf config file. What shall I do to fix this?
One simple way to work around this is to add a URL parameter to the end of the QuickChart URL that identifies it as an image.
<img src="{{ $ga_UsersCpcChartUrl }}&f=.png"
This will help programs that rely on file extension.
If that doesn't work, I'd probably have to see your $ga_UsersCpcChartUrl to help debug further.
Related
I need to embed an external image in a web page using markdown syntax, but the image's url is not a real image file (eg. jpg/png): it's an api with some get variables in it and the following example I've tried does not work.
If I put that url within the src attribute of an <img> tag it works.
Any clue?
https://developers.google.com/maps/documentation/static-maps/intro#quick_example
Notice that you don't need to do anything "special" to get this image
to show up on the page. No JavaScript is required. All we needed to do
was create a URL, and place it within an tag. You can place a
Google Google Static Maps API anywhere on your webpage where you can
place an image.
How do I place the URL within an tag?
See this example running from
Quick example
Here In this example I have not used any key but you have to use key as given in documentation to avoid any errors
<img width="600" src="https://maps.googleapis.com/maps/api/staticmap?center=Brooklyn+Bridge,New+York,NY&zoom=13&size=600x300&maptype=roadmap
&markers=color:blue%7Clabel:S%7C40.702147,-74.015794&markers=color:green%7Clabel:G%7C40.711614,-74.012318
&markers=color:red%7Clabel:C%7C40.718217,-73.998284">
I have a simple EmberJS app. There are a bunch of images stored in app/images. I can load an image from this folder in any template if I hardcode a path: <img src="images/MYIMAGE.png"/>. These images are associated with records though, and I have paths to them stored as attributes of the records. The path is a computed property from the filename persistent attribute. When I attempt to load the image through an Emblem template with img src="{{path}}", the image does not load. Ember is trying to fetch the image from this url:
http://localhost:9000/images/%3Cscript%20id='metamorph-71-start'%20type='text/x-placeholder'%3E%3C/script%3E%3Cscript%20id='metamorph-71-end'%20type='text/x-placeholder'%3E%3C/script%3E
If it makes a difference, I scaffolded the app with Yeoman and I have Grunt running a ton of preprocessors on my code (the standard ones that come with the Yeoman Ember generator). I thought maybe the images were being renamed, but the fact that I can retrieve them with a hardcoded path suggests otherwise. What's going on?
You need to use {{bind-attr}} for dynamic attributes like that.
<img {{bind-attr src=path}}>
See http://emberjs.com/guides/templates/binding-element-attributes/
Hey I have this textarea that makes the text into pdf when I press generate.
And now I want a qr code img to get added. The problem is the pdf can't detect it, but only make space for it.
Example if I add a img like:
<img src="http://upload.wikimedia.org/wikipedia/commons/b/b6/Image_created_with_a_mobile_phone.png"/>
it works.
But if I add something like
<img src="http://chart.apis.google.com/chart?chf=a,s,000000|bg,s,FFFFFF&chs=300x300&chld=M|4&cht=qr&chl=++++++++++++++++++++++++++++test%0A++++++++++++++++++++++&choe=UTF-8"/>
It wont work
Any ideas how I can make this work?
I think you should download it first into local disk, then you could write local address of that image in 'src='.
img src="http://localhost/blabla/image/chart.png"/>
Maybe its because your url isnt image, but php page. So pdf converter couldnt display it in to pdf.
While creating and learning bootstrap page. I came across the content attribute of css I read few articles and I got how it works. But following code snippet shows me an image icon but the content attribute value really isn't the image url but a code. I'm not clear as how we can show the image without the url and where is the image coming from?
.test.glass i:before {
content: "\e001";
}
Following is the html element to show an image icon using above css:
<span class="test glass"><i></i></span>
But what is "\e001" is that an image code or something else?
they are utf8 codes. there are plenty of sites describing the glyphs for different standard fonts but you can also define your own font set with whatever images you choose as whatever character.
if you use a webfont, from fontello for example but are plenty of sites like that one, you can define what image to use as character \e0001 and whenever you want to use that image, you must make sure you use that font-face for the element and use the utf8 code to display the image. in html it would be someting like <span class="iconfont"></span>. if you add the image with css then is like in your example.