Using v-parallax with an online image source like this works fine:
<v-parallax
dark
height="470"
src="https://images.unsplash.com/photo-1466916932233-c1b9c82e71c4?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1500&q=80">
</v-parallax>
But using it with a local asset src="#/assets/img/my-picture.png" doesn't work.
The same goes for <v-img src="my/local/source>, whereby <img> works fine.
What is the way to make it work?
Try this :src="require('#/assets/img/my-picture.png')"
Related
I'm experiencing a problem in my vue-cli created application. The following does not work:
<component :is="'v-text-field'"></component>
However a simple <v-text-field /> works great
The error is:
Unknown custom element: <v-text-field> - did you register the component correctly?
Does someone knows why? I can't reproduce it on codepen
Are you using vuetify-loader with tree-shaking? If so, you may just want to import {VTextField} from 'vuetify/lib' and add components: { VTextField }
I have the following code below, where the Image component encompasses two Image component.
<View style={styles.container} >
<Image
style={{width: 50, height: 50}}
source={{uri: 'https://facebook.github.io/react/img/logo_og.png'}}
/>
<Image
style={{width: 50, height: 50}}
source={{uri: 'http://lghttp.24811.nexcesscdn.net/80B00B/qpb/media/catalog/product/cache/11/image/439x334/9df78eab33525d08d6e5fb8d27136e95/q/w/qw_neverdonejoggers_p_.png'}}
/>
</View>
For the first github URL it renders the img logo correctly as expected.
However for the second Image it doesn't render the source: qw_neverdonejoggers_p_.png
Which leads me to the conclusion that something wrong URL, however clicking on the URL correctly load the Img:
http://lghttp.24811.nexcesscdn.net/80B00B/qpb/media/catalog/product/cache/11/image/439x334/9df78eab33525d08d6e5fb8d27136e95/q/w/qw_neverdonejoggers_p_.png
I attempted to replicate the issue here, https://rnplay.org/apps/_dQXXw
but it renders both the images properly.
So its only on the local my computer that for some reason I can render second image ?
Using:
"react": "15.4.1",
"react-native": "^0.39.2",
Andrés' answer is somewhat correct, but it does not address the exact cause of the problem, and that is iOS' App Transport Security. iOS does not allow plaintext requests (http) by default, and so you need to define a 'whitelist' of URLs that can be allowed to override this particular protection mechanism. You have that list already set up so that your app can connect to localhost during development,, so just add new entries to it. You can see how to do so in this answer. Of course, this only works if you know the list of URLs in advance, which might not suit your needs. In that case, have a look at this article.
uri only works with https. In Android it should work fine with either http or https.
You will find further information here.
Guys there is an issue with Image component is that if first time initialize the component with source={{uri : 'some link'}} it may not work (at least not for me when I fetch image from HTTPS URL from Firebase storage). The trick is you have to trigger a change to source props like first you need to keep
source to source={undefined} and then change to source={{uri : 'some link'}}.
Hope it would help someone
Aside issue with HTTPS, make sure you set the width and height of the Image
How i make Image source with http or https url work is by resetting the android emulator am using.
You can clear the emulator by opening the android studio then click on tools tab at the top bar select AVD Manager once it open
Select the emulator you are using, right click on it then select wipe data.
Once that process is completed, open cmd or terminal at the root of your react-native project
$ npx react-native run-android
I was researching a way if using a charting library with angular-meteor application. I have seen some examples of using HighCharts with AngylarJS. I have also seen examples of using HighCharts with Meteor. I would love to be able to use either HighCharts or ChartJS within angular-meteor application, and to have my charts data bound to Angular $scope, but, at the some time, have those charts react to the data changes in the server-side MongoDB (which us what Meteor does). I have seen some examples of angular-meteor app, but never seen such an app use any charts. Can anyone point me to a working angular-meteor example, which has a reactive chart?
You can use this angular directive for chart.js. Here is a simple example showing a pie chart:
Starting from a Meteor 1.3 template application (run meteor create myapp).
Replace blaze-html-templates with angular-templates in .meteor/packages,
add
"angular": "^1.5.5",
"angular-chart.js": "0.10.2",
"angular-meteor": "^1.3.10",`
to "dependencies" in package.json, run meteor npm install, replace the content of client/main.js with this:
import angular from 'angular';
import 'angular-chart.js/dist/angular-chart.css';
import 'angular-chart.js';
angular.module('app', [
'chart.js'
]).controller('MainCtrl', function ($scope){
$scope.labels = ["a", "b", "c"];
$scope.data = [1, 2, 3];
});
and the content of client/main.html with this:
<body ng-app="app" ng-controller="MainCtrl">
<canvas id="pie" class="chart chart-pie" chart-data="data" chart-labels="labels"></canvas>
</body>
run meteor.
You should see the pie chart. Obviously you can replace the data variable with some data from a collection etc. using Meteor. Here we haven't really used meteor except of the command line tool.
I'm playing around with the phoenix framework. I copied the chat example entirely but I'm not getting any results.
In fact when I write console.log("testing") in my app.js I notice that my console does not log anything...
I am getting the error referenced in this link:
phoenix framework - invalid argument at new Socket - windows
However that error seems to be related to Brunch not working in windows. When I brunch build, I can confirm that app.js has the console.log("testing") that I included.
Nevertheless, I don't see that console log when I visit my localhost:4000.
Why is JS not executing?
Turns out the guide is missing a key line that made it not work.
The guide has the following:
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="<%= static_path(#conn, "/js/app.js") %>"></script>
</body>
But that is missing the below line which you can put above the body tag.
<script>require("web/static/js/app")</script>
Even as Chowza already solved this question I would like to propose another, possible cleaner solution, using the autoRequire feature of Brunch.io.
The problem occurs because Brunch.io does not autoRequire the app.js under Windows correctly. Chowza worked around this issue by requiring the file manually in the html. You can omit the manual require if you alter the /brunch-config.js as follows: Change from
modules: {
autoRequire: {
"js/app.js": ["web/static/js/app"]
}
}
To
modules: {
autoRequire: {
"js/app.js": ["web/static/js/app"],
"js\\app.js": ["web/static/js/app"]
}
}
This way the app.js is autoRequired, even if you work on a Windows based system.
I would like to mention, that this solution is based on the link Chowza himself posted, so all credit goes to him for pointing to the link.
I'm trying to run Ace editor from file system for now and in Chrome I'm getting:
"SECURITY_ERR: DOM Exception 18"
FireFox doesn't mind it.
Found this on google groups:
due to same origin restrictions workers can't be loaded from cdn you
need to put them on your site, and add ace.config.set("workerPath",
"path/to/ace/src-min");
No joy.
I'm initializing the editor like so:
<script src="js/source-editor/src-min-noconflict/ace.js" type="text/javascript" charset="utf-8"></script>
<script>
var editor = ace.edit("editor");
ace.config.set( "workerPath", "js/source-editor/src-min-noconflict");
editor.setTheme("ace/theme/monokai");
editor.getSession().setMode("ace/mode/css");
</script>
Am I missing something hopelessly simple?
This isn't a full solution but it may help:
editor.getSession().setUseWorker(false);
This turns off worker, probably destroying performance in the process. It should probably be conditional on whether you are a local file by checking the url.
For what's it worth, issue disappears one deployed to server.