Javascript 将图像存储到阵列中

我试图在JS中创建一个可搜索的数组。我希望数组只显示图像，然后使用“标记”筛选和搜索此数组

如果我有类似的东西：

function NotebookListCtrl($scope) {
  $scope.notebooks = [
    {"name": "Lenovo",
     "processor": "Intel i5",
     "age": 2011},

//more notebooks... 

    {"name": "Toshiba",
     "processor": "Intel i7",
     "age": 2010},
  ];
  $scope.orderList = "name";
}

有没有一种方法可以让我使用一些类似于

notebooks[0] = new Image();
notebooks[0].src = 'images/img/image1.jpg';

那么，当显示笔记本项目[0]时，它会同时显示图像吗？

---

对JS来说比较新，我正在尝试将一些东西拼凑起来。谢谢你的帮助

无需创建新图像。这与html和图像的显示比任何其他内容都更相关：

function NotebookListCtrl($scope) {
  $scope.notebooks = [
    {"name": "Lenovo",
     "processor": "Intel i5",
     "age": 2011,
     "src": 'images/img/image1.jpg'
    },

//more notebooks... 

    {"name": "Toshiba",
     "processor": "Intel i7",
     "age": 2010,
     "src": 'images/img/image2.jpg'
    },
  ];
  $scope.orderList = "name";
}

<div 
     ng-repeat="notebook in notebooks | orderby: orderList">
    <p>name: {{notebook.name}}</p>
    <p>processor: {{notebook.processor}}</p>
    <p>age: {{notebook.age}}</p>
    <img 
         ng-if="notebook.src"
         ng-src="{{notebook.src}}">
</div>

函数NotebookListCtrl（$scope）{
$scope.notebooks=[
{“名称”：“联想”，
“处理器”：“英特尔i5”，
“年龄”：2011年，
“src”：“images/img/image1.jpg”
},
//更多笔记本。。。
{“名称”：“东芝”，
“处理器”：“英特尔i7”，
“年龄”：2010年，
“src”：“images/img/image2.jpg”
},
];
$scope.orderList=“name”；
}
名称：{{notebook.name}

处理器：{{notebook.processor}

年龄：{{notebook.age}

---

只需设置图像源并在html中使用ng src属性来设置图像源。

我的建议是避免使用图像对象，除非您需要在JS代码中预加载图像，并且只在数组中存储每个产品的img src路径，如：

 $scope.notebooks = [
    {"name": "Lenovo",
     "processor": "Intel i5",
     "age": 2011
     "img": "images/img/image1.jpg"    
    },
// ... 

然后在你的img标签中，你可以相应地指向每个产品的来源

---

您可以将web服务器配置为告诉浏览器缓存图像，这样可以延长img加载时间。

谢谢您的回答，我从来没有想过这样做。这种方法的加载时间是多少，比如说100张图片。。？如果使用这个方法，我能实现一个lazyload吗？这是在假设你使用angular（如果你以前从未使用过JS，它本身就是一个野兽）的情况下，我从来没有使用过angular，我想我应该在常规JS上获得一个句柄。我在大学里上过几节课，但它从未停课，因为我更喜欢前端/图形设计，只是为了好玩才学习HTML/CSS。@user4470749您的问题示例代码是Angular.js code。我正在向codepen上的某人请教如何做这件事。他一定用过它，这可以解释为什么我笔上的一些东西不起作用。如果你想预加载一些图像，可以使用它之外的图像对象。@漂移器是的，你还可以让服务器告诉浏览器使用Expires头缓存某些图像类型，这样用户下次登陆页面时会更快。