我正在努力将图像放入JSON对象中,这被证明是一种真正的痛苦。虽然我可以将图像显示在网站的着陆页上(基本64代码是正确的),但我想要做的是显示对象的属性,包括带有ui-view
的图像。
{
"FullName": "Lucy Ann Johnson",
"WentMissing": "1961",
"Age:": "20",
"Description": "Short brunette, was last seen wearing a green dress.",
"Image:" <img src="data:image/gif;base64,">
}
<div class="container"
style="
margin-top:0px width=100%" ui-view>
</div>
/*globals angular, console, $http, data, ListingsController*/
var mymodule = angular.module("controllers", []);
mymodule.controller("HomeController", function ($scope) {console.log("HomeController"); });
mymodule.controller("AboutController", function ($scope) {console.log("AboutController"); });
mymodule.controller("ListingsController", function ($scope, $http) {var data = $http.get("js/data.json"); });
mymodule.controller("ContactController", function ($scope) {console.log("ContactController"); });
mymodule.controller("ReportController", function ($scope) {console.log("ReportController"); });
/*global angular*/
angular.module('app', ['ui.router', 'controllers'])
.config(function ($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/home');
$stateProvider
.state('home', {
url: '/home',
templateUrl: 'templates/home.html',
controller: 'HomeController'
})
.state('about', {
url: '/about',
templateUrl: 'templates/about.html',
controller: 'AboutController'
})
.state('listings', {
url: '/listings',
templateUrl: 'templates/Listings.html',
controller: 'ListingsController'
})
.state('contact', {
url: '/contact',
templateUrl: 'templates/Contact.html',
controller: 'ContactController'
})
.state('report', {
url: '/report',
templateUrl: 'templates/Report.html',
controller: 'ReportController'
});
});
答案 0 :(得分:1)
由于您的JSON无效,您的错误会出现。尝试正确的JSON语法并转义分隔符,如:
jobViewModel
更好的方法是仅将原始数据解析到视图中以保持应用程序模式的严格性。这个fiddle展示了它如何运作的示例。
{
"FullName": "Lucy Ann Johnson",
"WentMissing": "1961",
"Age:": "20",
"Description": "Short brunette, was last seen wearing a green dress.",
"Image": "<img src=\"data:image/gif;base64,\">"
}
<div ng-controller="MyCtrl">
<img ng-src="data:image/png;base64,{{data.Image}}" />
</div>