I have a chat, and a JSON file where all the history is stored. All images/video/audio link to require('path to media').
However, for some reason, when using vue-cli-service serve or vue-cli-service build, webpack skips my image which is used for Emoji, not including it in dist folder, but converting it to base64 string.
JSON looks like this:
{ type: 'emoji', author: `me`, data: { src: require('../../Media/img/smiling-face.png') } },
{ type: 'text', author: `me`, data: { text: `Do you read me...`, meta: '✓✓ Read' } },
{ type: 'image', author: `support`, data: { src: require('../../Media/img/2.gif'), meta: '✓✓ Read' } },
{ type: 'image', author: `me`, data: { src: require('../../Media/img/1.jpg'), meta: '✓✓ Read' } },
My Emoji type message is converted to base64 for some reason, and the png image is not included in the final build.
In the browser I get the following entry: {author: "support", type: "emoji", data: {src: "data:image/png;base64,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"}}
But it should look like this: {author: "support", type: "emoji", data: {src: "img/smiling-face.png"}}
And this happens only with smiling-face.png, any other image, including other png is displayed correctly and included in the build, so can anyone say what's wrong?
Link to image "smiling-face.png": https://mega.nz/#!Ze5UzK7A!MdV23KlEou4ByfOlN0aCBc8N7KAGkvNnwPH1YFiltBE
Vue will encode any images below 10kb into base64 and inline into your JS bundle.
You can amend vue.config.js to remove this by setting the limit to -1:
module.exports = {
chainWebpack: config => {
config.module
.rule('images')
.use('url-loader')
.loader('url-loader')
.tap(options => {
options.limit = -1
return options
})
}
}
Related
Recently, I started to learn Ember-data and I'm writting an application with very custom API.
Response from Back-end is in bad format, so i normalize it to JsonApi via method 'normalizeResponse' and everything works good.
The problem appears in moment when I want to see content from response. When I was reading about Ember-data, I learned that if got data (InnerObjects), I will be able to take property from it via.
InnerObject.get('some_property'), but it doesnt work for me.
If I want 'some_property' I have to write InnerObject.data.someproperty what looks bad in longer path. I used Ember.debug() to see this path and my browser shows me that property '_data' is EmptyObject what is not true. When i click on it, it shows a list of properly content ( look attachment ).
Am I doing something wrong ? Am I forget about something or misunderstood Ember-Data?
I will be grateful for any help.
IMAGES:
Browser with _data -> EmptyObject
Browser with errors
export default DS.Model.extend({
facebook: DS.attr(),
www: DS.attr(),
name: DS.attr(),
street: DS.attr(),
house_number: DS.attr(),
postal_code: DS.attr(),
city: DS.attr(),
province: DS.attr(),
picture: DS.attr(),
x: DS.attr(),
y: DS.attr()
});
//json api serializer
export default ApplicationSerializer.extend({
normalizeArrayResponse(store, primaryModelClass, payload, id, requestType) {
return this._super(store, primaryModelClass, this._normalizeSearch(payload), id, requestType);
},
_normalizeSearch(shops) {
let data = shops.map((obj) => {
return {
type: "search",
id: obj.id_sklep,
attributes: {
facebook: obj.facebook,
www: obj.www,
name: obj.nazwa_sklep,
street: obj.adres_ulica,
house_number: obj.adres_nr_domu,
postal_code: obj.adres_kod,
city: obj.adres_miasto,
province: obj.adres_woj,
picture: obj.zdjecie_sklep,
x: obj.lat,
y: obj.lng
}
};
});
return { data: data } ;
}
});
export default Ember.Service.extend({
getShopsAndServices(pattern) {
return this.get('store').query('search', {
fraza: pattern,
cena_min: 0,
cena_max: 100,
id_kat: 1,
lat: 53,
lng: 18
});
}
}
//Controller action:
searchRequest(pattern) {
return pattern.length > this.MIN_CHARS_FOR_SEARCH ? this.get('search').getShopsAndServices(pattern).then((results) => {
let content = results.get('content').length ? results.get('content') : [];
if (content) {
let foo = content[0];
Ember.Logger.debug(foo)
Ember.Logger.debug(foo._data.name)
Ember.Logger.debug(foo.get('name'))
}
return this.set('content', results.get('content').length ? results.get('content') : []);
}) : this.set('content', []);
},
InnerObject.data.someproperty => This is wrong.
InnerObject.get('some_property') => this is right.
Update your question with not working code. so that we can identify the issue.
1.query method returns Promise and this will be resolved to DS.RecordArray which extends Ember.ArrayProxy so you can use all the methods available.
2.results.get('content') - Don't access content property,
3.You can convert that special array to normal array by results.toArray()
4.You can even use each helper to iterate it like normal array template which is returned by this this.get('search').getShopsAndServices(pattern).
I'm using a geojson extracted from naturalearthdata which looks like that :
All I want is to catch the NAME of each feature in order to display them in a grid (live search grid.. BTW is it efficient for 2000 names?)
But I can't access to all the name with root property. I tried to loop into all the features
Ext.define('myApp.store.Places', {
extend: 'Ext.data.Store',
alias: 'store.places',
requires : ['myApp.model.PlacesModel',
'myApp.view.main.MainModel'],
id: 'Places',
model: 'myApp.model.PlacesModel',
autoLoad: true,
proxy: {
type: 'ajax',
url : '/resources/data/coord.json',
reader: {
type: 'json',
transform: {
fn: function(data) {
for(var i = 0; i < data.features.length -1; i++){
names_places.push(data.features[i].properties.NAME);
}
debugger;
return names_places;
},
scope: this
}
}
}
});
But the debugger sent me that result which I don't understand :
Especially when the array looks good :
What is the good way to catch only the NAME? Does the return has to look to a json?
You can use the mapping attribute on the fields array in your model definition to map the correct attribute in the json to a field.
You set the rootProperty to features for the reader.
Then in your fields array something similar to this
fields: [
{ name: 'myCustomField', mapping: 'properties.NAME' }
]
I am using https://github.com/pablojim/highcharts-ng to build Highcharts in my angularjs app. As suggested on that site I am configuring my chart configs in my controller as follows:
$scope.chartConfig6 = {
options: {
chart: {
type: 'bar'
}
},
series: [{
data: [33, 55, 10, 18, 17]
}],
title: {
text: 'Agent FNOL Ranking'
},
loading: false
}
Now I have a json file: http://pastebin.com/SEu8dHkB if you do a search you can find the field called "highChart" on the json which contains the configurations for a highchart. Now I want to be able to use these configurations directly from the json to to my highcharts config either in the controller or as a directive. This is how I get the json file via http in my service:
.factory('Swoop',function($http,$filter,$q){
return {
all: function(){
var deferred = $q.defer();
$http.get("swoop.json").success(
function(data){
// angular.copy(data, studies);
deferred.resolve(data);
}
);
return deferred.promise;
}
}})
However, I am not sure how I could render this data(under the highChart object in the json) to the $scope.chartConfig6 like I did above. Can someone please show me how this could be done?
Trying to load a plan model, embedded, into my app model.
I keep getting the following error when loading (it saves just fine):
Cannot read property 'typeKey' of undefined TypeError: Cannot read property 'typeKey' of undefined
at Ember.Object.extend.modelFor (http://localhost:4200/assets/vendor.js:71051:22)
at Ember.Object.extend.recordForId (http://localhost:4200/assets/vendor.js:70496:21)
at deserializeRecordId (http://localhost:4200/assets/vendor.js:71500:27)
at http://localhost:4200/assets/vendor.js:71477:11
at http://localhost:4200/assets/vendor.js:69701:20
at http://localhost:4200/assets/vendor.js:17687:20
at Object.OrderedSet.forEach (http://localhost:4200/assets/vendor.js:17530:14)
at Object.Map.forEach (http://localhost:4200/assets/vendor.js:17685:14)
at Function.Model.reopenClass.eachRelationship (http://localhost:4200/assets/vendor.js:69700:42)
at normalizeRelationships (http://localhost:4200/assets/vendor.js:71463:12) vendor.js:17062logToConsole
With that said I have the following models,
app/models/app.js
export default DS.Model.extend({
name: attribute('string'),
domain: attribute('string'),
plan: DS.belongsTo('plan', { embedded: 'load' }),
creator: DS.belongsTo('user', { async: true }),
time_stamp: attribute('string', {
defaultValue: function () {
return moment().format("YYYY/MM/DD HH:mm:ss");
}
})
});
app/models/plan.js
export default DS.Model.extend({
price: attribute('number'),
description: attribute('string'),
tagline: attribute('string'),
title: attribute('string'),
features: attribute('array') // Array is defined in a transform, don't worry.
});
Plan being kind of a static document.
Here's my server response when calling store.get('creator.apps');
{
"apps":[
{
"_id":"53da9994b2878d0000a2e68f",
"name":"Myapp",
"domain":"http://myapp.com",
"creator":"53d9598bb25244e9b1a72e53",
"plan":{
"_id":"53d93c44b760612f9d07c921",
"price":0,
"description":"Free plan",
"tagline":"Great for testing",
"title":"Developer",
"features":["5,000 Requests","API/Plugin Access"],
"__v":0
},
"time_stamp":"2014/07/31 13:31:32",
"__v":0
}
]
}
I realize that the typeKey error is due to Ember not finding a model for the response. I can confirm that it finds the app type, firing a hook under normalizeHash.apps.
Sorry this is such a long post, just can't wrap my head around the cause of the issue!
App.Thing = DS.Model.extend(
{
name: attr('string'),
children: DS.hasMany('child', {inverse:null})
}
);
App.ThingSerializer = DS.RESTSerializer.extend(
DS.EmbeddedRecordsMixin, {
attrs: {
children: { embedded: 'always' }
}
}
);
DS.EmbeddedRecordsMixin must be in your model and you must have `embedded:'always' for the correct attribute.
If you have a Thing model then you can make Ember Data load the embedded children (here and array of nested objects) by using the model specific serializer.
Resources:
http://emberjs.com/guides/models/customizing-adapters/
http://emberjs.com/api/data/classes/DS.EmbeddedRecordsMixin.html
Ember doesn't want to have the record embedded in the JSON of the parent record.
Do what you need to, to get your json like this. With just the plan id.
{
"apps":[
{
"_id":"53da9994b2878d0000a2e68f",
"name":"Myapp",
"domain":"http://myapp.com",
"creator":"53d9598bb25244e9b1a72e53",
"plan_id":"53d93c44b760612f9d07c921", // just output id only not embedded record
"time_stamp":"2014/07/31 13:31:32",
"__v":0
}
]
}
This then lets ember look up the related model itself, using the async: true
export default DS.Model.extend({
name: attribute('string'),
domain: attribute('string'),
plan: DS.belongsTo('plan', { async: true }), //changed
creator: DS.belongsTo('user', { async: true }),
time_stamp: attribute('string', {
defaultValue: function () {
return moment().format("YYYY/MM/DD HH:mm:ss");
}
})
});
I've just gone through the pain of this myself and with some help found an answer.
For anyone else who's come here and still is has issues, read my answer to my own question for a detailed rundown of what the typeKey error means and further steps I used to resolve the issue myself.
Deploying ember-rails to Heroku - TypeError: Cannot read property 'typeKey' of undefined
I am using Dojo and it's dojo/data/ItemFileWriteStore module to read a JSON data file on my local server. In my .js file I have
var myDataStore = new ItemFileWriteStore({
url: "app/data/mydata.json",
handleAs: "json",
clearOnClose: true,
urlPreventCache: true
})
This is located in the postCreate function for my return declare function... so:
define([
"dojo/_base/declare",
"com/cayuse/base/_widget",
"dojo/text!./templates/myform.html",
...
"dojo/data/ItemFileWriteStore",
"dojo/store/DataStore",
"dojo/store/Observable",
"dojo/data/ObjectStore",
"dojo/domReady!"
],
function(declare, widget, template, ..., ItemFileWriteStore, DataStore,
Observable, ObjectStore){
return declare("app.myform", widget, {
templateString: template,
postCreate: function(){
domConstruct.create("link",{
type: "text/css",
rel: "stylesheet",
href: require.toUrl('dojox/form/resources/CheckedMultiSelect.css')
}, document.getElementsByTagName("head")[0]);
// data store
var myDataStore = new ItemFileWriteStore({
url: "app/data/mydata.json",
handleAs: "json",
clearOnClose: true,
urlPreventCache: true
})
console.log(myDataStore);
}
});
}
);
I can change the data store access from what you see above using IFWS method to
var myDataStore = dojo.xhrGet({
url: "app/data/mydata.json",
handleAs: "json",
load: function(data, ioArgs){
console.log(data);
}
});
and it finds the file with no problems.
This is so bizarre! Any ideas on what is going wrong here?
UPDATED:
Here is the data in the file I am reading. I believe it conforms to the JSON format. Let me know if not. xhrGet reads it fine.
{ "identifier": "id",
"label": "firstName",
"items":[
{"id":"0","firstName":"Robert","website":"www.barker.com","email":"robert#barker.com","bday":"1928-08-09","color":"Blue","toolkits":["Dojo","Moo"],"sendEmail":["on"],"format":"HTML"},
{"id":"1","firstName":"Vanna","website":"www.white.com","email":"vanna#white.com","bday":"1968-07-23","color":"Green","toolkits":["Dojo","jQuery"],"sendEmail":["off"],"format":"Text"}
]
}
ItemFileWriteStore requires your data being structured into something like this:
{ identifier: 'abbr',
label: 'name',
items: [
{ abbr:'ec', name:'Ecuador', capital:'Quito' },
{ abbr:'eg', name:'Egypt', capital:'Cairo' },
{ abbr:'sv', name:'El Salvador', capital:'San Salvador' },
{ abbr:'gq', name:'Equatorial Guinea', capital:'Malabo' },
{ abbr:'er', name:'Eritrea', capital:'Asmara' },
{ abbr:'ee', name:'Estonia', capital:'Tallinn' },
{ abbr:'et', name:'Ethiopia', capital:'Addis Ababa' }
]}
That is 'identifier' being your "ID" field, 'label' being your "label" field and then all your objects inside an array called "items".
You can check it out here in ItemFileWriteStore's documentation. If you don't have your JSON data structured like that it's possible that you may end up reading your file with the IFWS and actually not reading any data.
There are other store implementations in dojo 1.7 that don't require such structure, e.g. Memory Store that you can combine with other file reading techniques to achieve the same.
Try using dojo.data.ItemFileReadStore for reading
json data files, instead of dojo/data/ItemFileWriteStore.
Note that dojo.data.ItemFileWriteStore is used for writting json data.
If your code is EXACTLY as you posted it above then the interpreter might not like the fact that you omitted the semicolon from the ItemFileWriteStore assignment. Try adding the ';' as below:
// data store
var myDataStore = new ItemFileWriteStore({
url: "app/data/mydata.json",
handleAs: "json",
clearOnClose: true,
urlPreventCache: true
});
console.log(myDataStore);