I am building a angular 5 application .. I have bind src in component.html like this
<img id='img-upload' [(src)] = "imgesrc"/>
and my component.ts look like this
ngOnInit() {
this.footerService.messages.subscribe(msg => {
console.log(msg);
if (msg['value']) {
this.footerContent = msg["value"]['f_content']
this.imgesrc = "/assets/uploads/" + msg["value"]['f_logo']
}
})
}
Actually data is binding in two way but when ng server is running and uploading to assets folder from node server , that file is not getting instead file is available but when i am re building with ng serve command that image is appearing with same url which was throwing a 404 error before re build
If you use require('img_uri'), I think your problem will be solved.
Related
I am trying to play a video when developing locally with VueJS 2.
My code is the following :
<video class="back_video" :src="`../videos/Space${videoIndex}.mp4`" id="background-video"></video>
...
data :
function() {
return {
videoIndex:1
}
}
...
const vid = document.getElementById("background-video");
vid.crossOrigin = 'anonymous';
let playPromise = vid.play();
if (playPromise !== undefined) {
playPromise.then(function() {
console.log("video playing");
}).catch(function(error) {
console.error(error);
});
}
This code is causing the exception given in title. Tried in several browsers, always the same.
If I change the src by :
:src="require(`../videos/Space${videoIndex}.mp4`)"
it works.
But in that case building time is very long as I have many different videos in my videos directory, because adding require() will force to copy all videos in the running directory at build phase (vue-cli serve), and this is really annoying. In other words I want to refer videos that are outside the build directory to avoid this (but also to avoid having videos in my git).
It is interesting to note that when I deploy server side, it works perfectly with my original code
:src="`../videos/Space${videoIndex}.mp4`"
Note also that if i replace my code with simply
src="../videos/Space1.mp4"
it works too. So the video itself, or its location, are not the source of the problem.
Any clue ?
You can host your videos on a CDN to have something faster and easier to debug/work with.
Otherwise, it will need to bundle it locally and may take some time.
I am trying to serve a static HTML file using the res.sendFile() method from my express.js server that is hosted on AWS Lambda using the Serverless framework. Assuming that I am trying to serve an HTML file from the directory src/views/users/index.html.
In deployment, this is the file path that I have tried to serve my HTML file from /var/task/src/views/users/vindex.html, but I keep getting the error Error: ENOENT: no such file or directory, stat '/var/task/src/views/users/index.html' when viewing the AWS Cloudwatch log.
app.use(express.static(__dirname));
path.resolve(__dirname, "./src/views/users/index.html");
This is the results I get when I run tree src locally:
Have anyone experienced this issue before, and have solved it? Thank you so much!
Well, after many grueling hours and trying many solutions, I have found a workaround to render the html content without actually needing to render a .html file.
I ended up making a helper method that returns a string of the html content and send the html content string using the res.send() method instead.
html helper function
export const htmlHelper = () => {
return `<html content goes here>`;
}
route method
app.get('/html', (_, res) => {
const htmlString = htmlHelper();
return res.send(htmlString);
})
I'm using Vue CLI 3 version 3.0.5.
In project configuration, I use Nightwatch as e2e test tool.
I try to use page objects, so I had nightwatch.config.js file in project root, and add page_objects_path inside like below:
{
page_objects_path : "/tests/e2e/page-objects"
}
Then I create page-objects folder as this path: /tests/e2e/page-objects.
Then I setup a page object Entry.js under that folder and try to use it in test:
/tests/e2e/page-objects/Entry.js
vmodule.exports = {
'Test Page Object': browser => {
browser
.url(process.env.VUE_DEV_SERVER_URL)
.waitForElementVisible('#app', 5000)
browser.page.Entry().sayHello()
browser.end()
}
}
And the error message shows:
Cannot read property 'Entry' of undefined .
It looks like my page object setup is not correct...
Could anyone help providing a correct implementation of NightWatch page object in Vue CLI v3.0.5 ? Thanks...
Ah, I know why it won't work.
Because nightwatch.config.js is a javascript file, I should export it first, then the plugin can read it.
module.export = {
page_objects_path : "/tests/e2e/page-objects"
}
Sorry for the dumb question.
I've build a new app with an express-generator so i've got public dir with javascripts i guess for a client side. But i can't get access to this files.
My app.js has for an absolute path
app.use(express.static(path.join(__dirname, 'public')));
But when i put on my index.html page on the bottom of the body like this
<script type="text/javascript" src="/javascripts/main.js">
i've got an error inside a console with a 404 regarding to this script.
you need to install stylus and nib npm modules
var express = require('express')
, stylus = require('stylus')
, nib = require('nib')
function compile(str, path) {
return stylus(str)
.set('filename', path)
.use(nib())
}
app.use(stylus.middleware(
{ src: __dirname + '/public'
, compile: compile
}
))
app.use(express.static(__dirname + '/public'))
I am developing something similar. I have my javascript files inside js folder in public folder. This is my link to javascript and I am not getting any error:
<script src="js/options.js"></script>
I think you needed to remove a common slash in "src" tag or properly close the "script"
I have app.js that looks like:
var noflo = require("noflo");
var graph = noflo.graph.createGraph("PrintValueGraph");
graph.addNode("output", "Print");
graph.addInitial(100,"output","in");
var network = noflo.createNetwork(graph);
And I have a Print.coffee script in the same dir, that has the same code as Output.coffee on the noflo-core folder.
I get the error: no process defined for inbound node output.
Do u have any idea, what the problem is?
Thanks
You must declare the Print component in the package.json
"noflo": {
"components": {
"Print": "./Print.coffee"
}
}
Components need to be registered in the package.json (or component.json for the browser) for the NoFlo ComponentLoader to find them.
See example: https://github.com/c-base/ingress-table/blob/master/package.json#L41
There is also the grunt-noflo-manifest package that can automate this for you.
The convention is to keep your components in a components/ subdirectory inside your project.