I have a little problem when I use an asset.
error capture
In my database I have the link of videos which are stocked in my server and for example one of them is : Commande/test/a/2362022a.mp4, the right path of the file is myProject/public/Commande/test/a/2362022a.mp4
So I try to do this :
<video controls>
<source src="{{ asset(commande.lienVideo)}}" type="video/webm">
</video>
But I have this error :
An exception has been thrown during the rendering of a template ("Asset manifest file "/var/www/html/app_brobro/public/build/manifest.json" does not exist. Did you forget to build the assets with npm or yarn?").
I also try this, but I have got the same error :
<video controls>
<source src="{{ asset('/' ~ commande.lienVideo)}}" type="video/webm">
</video>
I hope someone will have a solution to this ^^
Thanks by advance and have a nice day !
According to our exchanges in comments here is your solution:
As the official Symfony documentation specifies here, you have to build your Webpack with yarn dev by default or npm run build if you prefer npm to manage your front dependencies.
So just run one of them and that's it !
Related
I have a Vue.js project, when I check the console found this issue bellow:
Refused to apply style from 'http://localhost:8080/dist/cropper.min.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
I searchedSO, found a Angular related post, but it do not helps me, they are based on different frontend framework.
The usual reason for this error message is that when the browser tries to load that resource, the server returns an HTML page instead, for example if your router catches unknown paths and displays a default page without a 404 error. Of course that means the path does not return the expected CSS file / image / icon / whatever.
To make sure you are in that case, copy the path and try to access it directly in a new browser window or tab. You will see what your server sends.
The solution is to find the correct path and router configuration so that you get your plain CSS file / image / etc. when accessing that path.
The exact path and router configuration depends on how you have setup your project and the framework you are using.
You provided insufficient information. But i had the same problem, so i have a solution.
Say you #import css files in a component's style block. So my problem was in path that i specified. And the error message Refused to apply style appeared because of wrong path. I thought that my src path alias ~ is resolved in a style block, but it wasn't.
All i had to do is to specify /src/assets/css... instead of ~/assets/css...
I got exact same problem " Refused to apply style from 'http://localhost:8080/css/formatting.css' because its MIME type ('application/json') is not a supported stylesheet MIME type ..."
I browse through the window explorer and corrected the file paths (folders) as i intended to. There was also spelling error in the addressing like the path was as above (formatting.css or double 't') but the file actually was formating.css (single 't') and the problem solved. Some solutions are not expensive at all. Thanks.
yo have to change the place of your file css into the directory assets
assets/style.css
and then put these path in your file index.html src/index.html
<link rel="stylesheet" type="text/css" href="assets/style.css" />
in addition you have to modify to file angular.json in styles
"styles": [
"src/assets/style.css",
"./node_modules/materialize-css/dist/css/materialize.min.css",
],
It might also occur when you set incorrect BUILD directory in package.json. for example
// Somewhere in index.js
// Client Build directory for the Server
app.use(express.static(path.resolve(__dirname, '../this-client/**build**')));
then package.json:
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject",
"install:clean": "rm -rf node_modules/ && rm -rf package-lock.json && npm install && npm start",
"build-package-css": "cp src/assets/css/my-this-react.css **build**/my-this-react.css",
"build-package": "npm run build-package-css && babel src --out-dir **build**"
},
The directories I marked as Bold should be the same. If there is a difference then it won't run.
I encountered the same error when running my app in production. With npm run serve everything worked but the result of npm run build resulted in that same error. It turns out that I was using vue router in history mode and my nginx server wasn't properly configured.
I changed vue router to hash mode and stopped getting that error message. Try using hash mode and see if the message goes away. If it does then you need to tweak your web server settings.
I was dealing with the same problem with my React project, and the solution I found was to add a "publicPath" to the output in webpack.config.js.
output: {
path: path.resolve(__dirname, "dist"),
filename: "bundle.js",
publicPath: "/",
},
I ran into this issue.. I was integrating some scss files into my project and just presumed that I should use the
rel="stylesheet"
<link href="/epic.scss" rel="stylesheet" type="text/css">
once I removed the attribute no more style sheet issues...
Working .scss file
<link href="/epic.scss" type="text/css">
in my case , I just changed the link tag from<link href="Content/charity/bootstrap-icons.css" rel="stylesheet"> to <link href="~/Content/charity/bootstrap-icons.css" rel="stylesheet">and it worked . just add ~
For my case (not for vue.js)
adding the "base" tag solved the error:
<head>
...
<base href="/">
...
</head>
I have the following code with a simple working Vue.js application. But the vue.js devtools is not responding. It was working well a few days ago, now it's not working anymore what could possibly be going wrong? when I go to https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd, it says it is already added.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="https://unpkg.com/vue#2.1.6/dist/vue.js"></script>
<title>Document</title>
</head>
<body>
<div class="container">
<div id="application">
<input type="text" v-model="message">
<p>The value of the input is: {{ message }}</p>
</div>
</div>
<script>
let data = {
message: 'Hello World'
}
new Vue({
el: '#application',
data: data
})
</script>
</body>
</html>
One alternative is to set up a local web server, as the OP already stated.
The other - which IMHO is faster and less harassing - is letting the extension have access to file URLs, which is disabled by default.
Simply go to chrome://extensions and leave the "Allow access to file URLs" box checked for Vue.js devtools.
Sources:
https://github.com/vuejs/vue-devtools#common-problems-and-how-to-fix
I tried all of the ways presented in answers here, but none of them worked for me (neither for chrome nor for firefox).
Finally I found an answer: If you still have this problem, you can try to uninstall the current version of Vue extension and install beta version: https://v3-migration.vuejs.org/breaking-changes/introduction.html#devtools-extension
Remember to restart your browser afterwards.
UPDATE: 2021 May 30,
If you are using Vue 3, old dev tools versions won't work, so just use the new beta version.
https://chrome.google.com/webstore/detail/vuejs-devtools/ljjemllljcmogpfapbkkighbhhppjdbg
To solve this, simply go to chrome://extensions/, scroll down to the Vue.js devtools and enable the "Allow Access to file URLs" by clicking on its checkbox.
Source: https://github.com/vuejs/vue-devtools/issues/236
Had the same issue and solved it by adding
Vue.config.devtools = true;
after Vue.js import script, then take look at chrome devtools. You will see a tab called Vue to inspect your vue instance.
reference: https://v2.vuejs.org/v2/api/#devtools
I found out the answer, I was viewing a plain html file on my computer which was making the vue.js tool not load. I loaded up my local xampp server and ran the application from the local machine server url again and now vue.js devtools is working! :)
Also you can disable with Vue config:
https://v2.vuejs.org/v2/api/#devtools
in the extensions folder in chrome browser, under the details tab in vue devtools extension, check the box having allow access to file URLs,
this worked for me..
If you're using Vue 3 and experiencing this issue, try installing the beta version of the Vue Devtools. It may help until the stable version gets the major refactor.
I had the same issue & solved it by:
Installing this extension Vue Dev Tools Beta Chrome Extention
Reloading the chrome browser.
i had this problem, and i was expecting the vue-devtools to work by just including it. i had it console log the version
console.log("Vue Version " +Vue.version );
but this didnt work to actually load an instance of vue.
took me a few minutes, but once i actually created a vue instance, then it worked. this was the hello world example that made the devtools work :)
let data = {
message: 'Hello World'
}
new Vue({
el: '#application',
data: data
})
I solved the same problem.
But in my case Vue.js Chrome Devtools didn't detect Vue.js because in html file was <script src="https://unpkg.com/vue"/>
I replaced it to <script src="https://unpkg.com/vue"></script>
Now Chrome Devtools is detecting Vue.js perfectly.
Thanks for exapmle above.I use vue#2.4.4 and open my html by file://
In the case of Firefox, install the beta version of vue-devtools, which supports Vue 3.
If you have already turned on Allow Access to file URLs in chrome://extensions/ -> Vue Devtools and it still does not work, try reinstall the Vue Devtools, might work for you.
check if vuejs app is not embedded in an iframe such as in a storybook app.
the hack in such a case is to work outside the parent frame working directly on the url of your iframe and the vue devtools should work fine.
I'm using Vue in electron and I have the electron main "app" separated Vue's "app".
When in the the debugger console, typing Vue was giving the error Uncaught ReferenceError: Vue is not defined
Here was my fix
window.vue = new Vue({
components: {
App,
Login,
},
router,
store,
template: '<App/>',
}).$mount('#app');
The work-around was assigning window.Vue so the devtool could find it.
The same problem here, and I've solved it.
If you are developing in the localhost environment and using Chrome Dev Tools then you need to give permission for the Vue.js extension to access the local files on your computer.
Config your Vue.js tool in Chrome extensions
Search for "Vue.js devtools"
Click on details
Check the "Allow access to file URLs" checkbox
In my case I just had compiled for production npm run prod - which was the issue. As I ran in dev npm run dev, it started recognizing Vue.
is it possible to set the orientation a .mp4 file in the video.js player? I don't see properties to do so such as Orientation="Portrait", but I was wondering if setting the width and height at runtime would do this.
You should try out this plugin.
Video.js Zoom Rotate
A videoJS plugin to easily rotate or zoom in a video
https://github.com/xbgmsharp/videojs-rotatezoom
Joe DF answer is the solution. However I struggled to get it working properly and so I decided to share the step by step of what worked for me.
OK, first I tried like hell to get the videojs.zoomrotate.js plugin working without using 'bower' but unfortunately there is no way of doing it so you will HAVE to use it. In my case I use Visual Studio and Visual Source Safe so npm, git, etc, are useless in my setup and that's why I didn't want to install such stuff. The good news is that you can uninstall everything after to get VideoJS and the rotate plugin working. Finally it's important to let you know that I did it from Windows 10.
Let's see how to do this:
Download and install 'Git'.
Download and install 'npm'.
Open the command prompt (cmd) and install 'bower' typing:
npm install -g bower
Tip: If you got any error, just close your command prompt and open it again.
No worries, as I said you can uninstall everything later if you don't want to keep it.
Now we will install VideoJS. I already had it in my project but I choose to make everything from scratch to ensure it would work no problem. At this point I recommend you to CLOSE your command prompt and open it again to avoid get errors from npm.
Open command prompt and install VideoJS. Type:
npm install --save video.js
At last install videojs.zoomrotate.js. Type:
bower i --save videojs-rotatezoom
Now close your command prompt, open Windows Explorer. Navigate to c:\users\your_user_name\
You will see a new folder that was created by bower named bower_components. Enter it. You will find two subfolders in it, one for VideoJS and another for the plugin.
Enter video.js folder and then dist folder. You want only two files from there: 'video.js' and 'video-js.css'. Copy both to the folder in your application where you put your scripts.
Return to the bower_components folder and enter videojs-rotatezoom folder. Now enter the src folder. Copy the file 'videojs.zoomrotate.js' to your application scripts folder. Now you have everything you want.
You can uninstall npm and git and delete all left overs from the c:\users\your_user_name if you want, because you don't need it anymore.
Now it's time to put the videojs into your html file. Copy and paste this:
<link href="/your_script_folder/video-js.css" rel="stylesheet" />
<script src='/your_script_folder/video.js'></script>
<script src='/your_script_folder/videojs.zoomrotate.js'></script>
<div id="divVideo" class="video">
<video id="my-video" class="video-js" controls="" preload="auto" style="width:800px;height:600px;" >
<source src="yourvideo.mp4" type='video/mp4' controls='false' />
<p class="vjs-no-js">
To view this video please enable JavaScript, and consider upgrading to a web browser that
supports HTML5 video
</p>
</video>
<script>
var my_video_id = videojs('my-video');
my_video_id.zoomrotate({
rotate: 90,
zoom: 1.5
});
</script>
</div>
That's it! If you follow the steps correctly you should have it working by now. Just set the rotate and zoom attributes as you need.
Enjoy!
The best to fix this it to rotate the actual video file. You can do this by using VLC Player.
Go to Tools > Effects and Filters.
Click on Video Effects->Geometry.
Enable Transform and select Rotate by 90 degrees from the dropdown.
Other video libraries should rotate it too. (e.g. Windows Movie Maker)
the other option is to add this to your css
video{
-moz-transform:rotate(90deg);
-webkit-transform:rotate(90deg);
-o-transform:rotate(90deg);
-ms-transform:rotate(90deg);
transform:rotate(90deg);
}
Note that this will transform your controls also however
So I'm trying to add subtitles to a html5 video and found WebVTT. I've done some research on it and have even copied some example code to see if that'll work and yet I have no luck.
The subtitles just simply don't show up on the video.
Here's the HTML.
<video id="video" class="video" controls>
<source src="solar.mp4" type="video/mp4">
<source src="client2.ogv" type="video/ogv">
<source src="solar.webm" type="video/webm">
<source src="solar.flv" type="video/flv">
<track label="English Captions" kind="captions" srclang="en" src="english-subtitles.vtt">
</video>
and the test VTT file.
WEBVTT
1
00:00:13,00 --> 00:00:16,000
Man did you see that awesome thing like last week -
2
00:00:16,100 --> 00:00:20,100
- and i said wow a lot of people are starting to talk about this.
It doesn't work locally, you need to run it on a server.
You use the incorrect time-stamp format. There should a . (dot), after the second value.
It should be like this: 00:00:00.000 --> 00:00:10.000
I had the same problem you were having.
The problem is that Chrome has a security feature that does not allow files to run local files in Chrome.
The solution is to run Chrome with the allow local access flag. The link gives instructions for each OS.
Browsers do not support that feature locally
Except Mozilla Firefox 66.0.2
I have done a website whose URL is http://www.netbramha.com
Unfortunately after the end of each page, I have the following piece getting added
<iframe src="" width=186 height=182 style="visibility: hidden"></iframe>
The src is from b9g.ru.
I have gone through all the required files and none of them have these and there in no entry of this in the database as well.
Is there any solution for this?
It's a virus, perhaps from a wordpress plugin you installed. Check your computer for a virus.
Update:
Try to ask your hosting provider for help. It might be their problem. Otherwise, try to grep for b9g in sources, something like "grep -r -i b9g ./", although it's probably encripted.
If its wordpress, try having a look in the comments, and try disabling all of your plugins, and check the content they add one by one to see what its doing. Other things you can check after that is to try switching the template to one freshly downloaded from the WP site.