app.get('/individual_report/:athlete_id', function(req, res) {
database.select('*').from('participants').then(data => {
if (data.length) {
res.render('individual_report', {
name: data
});
const hbsfile = fs.readFileSync(__dirname + '/../public/views/individual_report.hbs', 'utf8');
const document = {
template: hbsfile,
context: {
options: {
dataForPDF: data,
ssl_logo: '../public/static/assets/image/white_ssl_logo.png',
},
},
path: __dirname + '/../public/reports/' + data[0].first_name + " " + data[0].last_name + '\'s scores.pdf'
};
pdf.create(document, options).then(res => {
console.log(res)
}).catch(error => {
console.error(error)
});
} else {
res.json({
msg: 'Invalid athlete ID'
});
}
}).catch(err => res.sendStatus(400));
});
The above node express route renders a html page and also generates a PDF using the HandleBars .hbs template.
<img class="ssl_logo" src="{{{options.ssl_logo}}}" alt="logo.png" width="120" height="50" />
This is what I have in the .hbs file that should display the logo image file.
The image is not rendered in the browser and also in the PDF file. However, the alt attribute is rendered on the browser and in the PDF. I looked into the console log and I get this unknown at the source attribute:
img class="ssl_logo" src(unknown) alt="logo.png" width="120" height="50"
I am using the dynamic-html-pdf node package to generate this report and can anyone suggest me something that might make this works? Thank you.
just try to use file protocol
ssl_logo: 'file://' + __dirname + '/public/static/assets/image/white_ssl_logo.png',
it will work normally even the SVG images will be generated
Welp, I am going to answer my own post. For some reason this piece of code is not reading the local image file, so what I did was uploading the image to google drive, get the shareable link, google how to modify the shareable link because the link that is generated will not work in our code, and replace the image file address with the link.
Hope this will help those who is or will have this issue. (Ultimately you have to solve the problem yourself, haizzzz)
Related
I’m trying to require an image downloaded with react-native-fetch-blob in my Image component, but when I give it the image path it keeps saying me « Unknow named module: ‘/Users/…/Library/…’
What is the right way to require images stored in a local directory ?
let imagePath = null
RNFetchBlob
.config({
fileCache : true
})
.fetch('GET', uri)
// the image is now dowloaded to device's storage
.then((resp) => {
// the image path you can use it directly with Image component
imagePath = resp.path()
this.setState({ uri: require(imagePath) })
try {
AsyncStorage.setItem(`${this.props.uri}`, imagePath);
} catch (error) {
console.log(error)
}
})
My render method :
render() {
return(
<Image style={this.props.style} source={this.state.uri} />
)
}
The problem is not because I set a variable as source because it's working when I put something like : this.setState({ uri: require('../images/test.jpg') }) after my download.
require(imagePath) exists to help packager to find local images and place them to application bundle.
When you need to show dynamically loaded image, you simple need to pass file location as URI, for ex:
render() {
const imageAbsolutePath = this.state.imagePath;
const imageUri = 'file://' + imageAbsolutePath;
return <Image source={{uri: imageUri}}/>;
}
So, you shold not need any require statements in this case.
How do I point file url from a js file? Here's a code snippet that I would like to implement.
const currentCacheName = "sample-app-v2";
self.addEventListener('install', (event) => {
const urlToCached = [
'/',
'<%= static_path(#conn, "/css/app.css") %>', // Adding .eex on the js file won't work.
'<%= static_path(#conn, "/js/app.js") %>'
// Add fonts, icon, etc.
];
event.waitUntil(
caches.open(currentCacheName).then(function(cache) {
return cache.addAll(urlToCached);
})
);
});
self.addEventListener('activate', (event) => {
event.waitUntil(
caches.keys().then((cacheNames) => {
return Promise.all(
cacheNames.filter((cacheName) => {
return cacheName.startsWith('sample-app-') && cacheName != currentCacheName;
}).map((cacheName) => {
return cache.delete(cacheName);
})
);
})
);
});
self.addEventListener('fetch', (event) => {
event.respondWith(
caches.match(event.request).then(function(response) {
if(response) return response;
return fetch(event.request);
})
);
});
I'm trying out phoenix with serviceworker but I need to get the latest digest assets file for it to work.
There are several ways of doing such thing. One of it is to convert your JS file from a static asset to a template – create route for this, controller, view and move JS code to a template file (for example – script.js.eex under web/templates/script/ if you named you controller like ScriptController and view is the ScriptView). In that case you will be able to use template tags inside of JS code, and serve your script from the root of web app if you need. This is completely similar to adding new routes/pages to your Phoenix app. Also you should disable forgery protection for such route (remove :protect_from_forgery from a pipeline in router). Cons of this is that you'll lose all JS pipeline for this script, so no transpiling and other stuff like this.
I am now working on one Meteor project and trying to do the below.
I have a product list page and when I click one product, I goes to product edit page.
What I want to know is how to attach product image and show it when I go back to product list page.
I know CollectionFS used for file upload, but because there is no reliable guide to show detail, I am getting trouble for it.
I added this to schema, but don't know how to show product image in list page.
Images = new FS.Collection("images", {
stores: [new FS.Store.FileSystem("images")]
});
Images.allow({
insert: function(){
return true;
},
update: function(){
return true;
},
remove: function(){
return true;
},
download: function(){
return true;
}
});
Schemas.Products = new SimpleSchema({
'name': {
type: String,
label: 'What is the name of the building?',
max: 200,
unique: true
},
'picture': {
type: String,
max: 200,
optional: true,
autoform: {
afFieldInput: {
type: 'fileUpload',
collection: 'Images',
accept: 'image/*',
label: 'Choose file'
}
}
}
});
Is there anyone can give me a direction? Please help me!
The goal in here is to show product image in product list page.
I found this really helpful wiki on CollectionFS's page. It shows how to display an already uploaded image from front-end.
CollectionFS provides an url method associated with its FS.File object. Using this method we can display the image from frontend.
Steps:
Publish Images (FS.Collection instance) from server-side.
Subscribe to the above from your client-side.
In your template-helper, return Images.find() to the template.
You can embed the result of Images.find() into the result from another collection as well. For example:
var products = Products.find().fetch();
products.forEach(function(each) {
each.file = Images.findOne({ _id: each.file });
});
return products;
Inside the template, you can display the image using:
<img src="{{this.url stores='images'}}" />
Here this refers to the FS.File instance and 'images' is the store name.
I'm creating a Firefox addon using jetpack (jpm with node.js) to extend the Firefox developer tools to allow editing the current page's html. (I know this feature already exists; just trying to learn the ropes).
What API do I use to access the current page's HTML? I see that there is a Debugger.Source but I'm not sure if this is correct. If so, how do I retrieve this data?
As the first answer suggests, you can get at the html source using a content script injected the page. For example, here's a very simple approach that uses the tabs module to attach a content script into the current page:
const self = require('sdk/self');
const tabs = require('sdk/tabs');
let { ActionButton } = require("sdk/ui/button/action");
let button = ActionButton({
id: "my-button-id",
label: "Get HTML Source",
icon: {
"16": "chrome://mozapps/skin/extensions/extensionGeneric.png",
"32": "chrome://mozapps/skin/extensions/extensionGeneric.png"
},
onClick: (state) => {
let worker = tabs.activeTab.attach({
contentScript: 'self.port.emit("htmlSrc", {head: document.head.outerHTML, body: document.body.outerHTML});'
});
worker.port.on('htmlSrc', (result) => {
worker.destroy(); // clean up
let src = "<html>\n"+ result.head + "\n" + result.body + "\n</html>";
require('sdk/clipboard').set(src, 'text');
});
}
});
Direct access via SDK is impossible, but you can use content scripts to read and modify the page.
I have a MVC project. I am new to jsrender and try to render it.
I have a js file which contains all the jquery function. so i have put my template in there as well. The code for that looks like:-
function doSomething(){
var movies = [
{ name: "The Red Violin", releaseYear: "1998" },
{ name: "Eyes Wide Shut", releaseYear: "1999" },
{ name: "The Inheritance", releaseYear: "1976" }
];
$.when($.get('../Views/Hr/Templates/_mytemplates.tmpl.html'))
.done(function (tmplData) {
alert(tmplData);
$.templates({ tmpl: tmplData });
$('#divload').html(
$.render.tmpl(movies)
);
});
}
The js file is located in the Scripts/myScripts folder.
I am not able to render this template.
Can anybody explain why i am having the issue?
Thanks in advance