I need to generate a PDF with an image in the background.
To generate the PDF I'm using jsReport.
I'm using the HTML tag image <img src="Content/img/boleta2.png" /> and this is working great, because when I open this in Firefox, the image shows up.
But when I generate the PDF, only shows the HTML without any image.
In the official page http://jsreport.net/learn/images
it says something like "To upload an image you can use simple http POST...."
But I don't understand this very well.
Content/img/boleta2.png seems like a relative path to somewhere. In every case jsreport has no idea what is the full path.
You can use html base tag to specify the root path http://www.w3schools.com/tags/tag_base.asp
Or you can use full path directly in the img src.
The image extension is used for uploading images directly into the jsreport storage where it can be later referenced. Image is uploaded usually from html jsreport studio, the mention about http POST is about using API what is an advanced use case you probably don't struggle with right now.
Related
I have zero knowledge with regard to coding. I desperately need to download a pdf file which is being shown in the fashion attached to this post. The download button is not working and I've tried everything which I can to download the file. Any help is welcome. Things which I've tried are
Finding file source in network tab under inspect element
Finding any URl leading to the pdf again in the inspect elements tab.
Saving the page as Html, upon which it downloads but never opens again with the pdf required.
Also in my limited research which I could make sense of was, the page used canvas element to render the pdf. Text of pdf is seen to be entered manually in a separate layer.
The address of the pdf being rendered is actually visible in the url on your image.
the ../../ means go up 2 directories.
So that means the absolute url for your pdf is this.
https://www.time4education.com/MoodlePages/catmttt/cat20materialvideos/VAHO1002103.pdf
So I found this piece of code: https://gist.github.com/NoUsername/9308327
I downloaded it as zip, created a new folder name "images"in the root directory (same folder where I put the HTML file), and added some jpg pics in it. But when I opened the HTML file, the images won't load.
Is something wrong with the code?
P/S: When I changed the source of the tag to "/images/<1st pic's name>.jpg", the 1st image showed up just fine, though.
I believe this script assumes you have enabled directory listing feature of apache for /images
See https://support.tigertech.net/directory-index
When you access http://your.server/images it should show a list of the files as a html page. This script uses this list to get the image urls and render them.
To enable the feature you need to create a .htaccess file inside /images with the options provided in the documentation link.
If the answer of #venimus doesn't work. Be sure about your image path. You can use fullpath istead of "/iamges", like "http://localhost/image_directory". Last of all If you image's extension in uppercase like "image.PNG" it can't find your images.
I have an application that loads an image - the URL of the image however is dynamically generated.
The image URL would look like this (I get the image name through their API):
http://openweathermap.org/img/w/10d.png
That URL is created in javascript - how would I make javascript actually get the image from that URL and return the .png so I could display it?
Would ajax be best for this? The solution would have be in regular javascript as the application displaying the image only allows for basic javascript.
Edit: This is for a digital signage solution - so I need to get the .png file into javascript where I will return ThePicture so the signage can display it appropriately. So unfortunately, just adding it to the/a DOM won't work.
I have an issue with latest tinyMCE editor, whenever I try to select and edit the image, it's source is converting into blob path like this.
blob:http://localhost/87d42e34-9961-412c-914b-dc6a77ab68e0
Did anyone of you face this issue or resolved... ?
Please help
When you edit images using the TinyMCE Image Tools you will get one of these encoded images - that is how the Image Tools work.
What you can then do is configure TinyMCE to upload this image and you can store that image as you see fit for your application.
The basic process is that TinyMCE will create a separate HTTP POST for each image that you modify with the image editor. It will send that image to a URL of your choosing (via HTTP POST) based on the setting of the images_upload_url option in your init.
The image handler at the URL referenced in the images_upload_url (which you have to create) has to do whatever needs to be done to "store" the image in your application. That could mean something like:
Store the item in a folder on your web server
Store the item in a database
Store the item in an asset management system
...regardless of where you choose to store the image your image handler needs to return a single line of JSON telling TinyMCE the new location of the image. As referenced in the TinyMCE documentation this might look like:
{ location : '/uploaded/image/path/image.png' }
TinyMCE will then update the image's src attribute to the value you return. If you use the images_upload_base_path setting in the init that will be prepended to the returned location. The TinyMCE page has more details on all of this:
https://www.tinymce.com/docs/advanced/handle-async-image-uploads/
The net here is that the Image tools will create one of these encoded images whenever you edit an image. TinyMCE knows when an embedded image exists in your content but it can't possibly know what to do with that image in the context of your application so that job (the "image handler") is something you must create.
I tried to put a picture in an HTML file. If I put them using for example background-image: url('file:///C:/Users/faycel/Desktop/site%20guide/paris.jpg'); it works However when I tried another link for a picture it doesn't work. The problem is what can I do when I will put my website online.No image will appear since this link work only in my computer I thinked about google drive so I put some pictures that I will use in my website in google drive but when I used the links I didn't get any picture on my web page (all the pictures were public in my drive)
PS: I used the method ./images/logo.png" but in vain .
There are two ways to reference images and other documents with HTML: with absolute linking and with relational linking. A good practice is to have an ordered folder estructure and reference with relational URLs.
For instance, you can have a main directory where you store all your html files and sub-directories for your images, css stylesheets, scripts and so on. Using this folder estructure, you'd reference your image with img/paris.jpg, where img is the containing folder for all your images.
This way, when you upload all your files, nothing will break.
For more infor, visit the W3C documentation: http://www.w3.org/TR/WD-html40-970917/htmlweb.html
The link "file:///C:/Users/faycel/Desktop/site%20guide/paris.jpg" calls the image in your computer. Try with the public URL of the file in Google Drive.
Its simple, you just need to put an absolute link in your image.
For example..
If your website have an img directory you can use
<img src="http://www.example.com.br/img/img.png"/>
You can use relative links.
Create a folder named images on the same location where html file is
Add all images to this directory
Instead of full path like c:/something/something/images/fil.png just use images/fil.png
When uploading the website also upload the images folder and it's contents
This fixes your problem. But don't forget to read tutorials about IMG tag and its SRC attribute.