vue+element-ui动态加载多个assets中以书籍id命名且与书籍id对应的图片
时间: 2023-08-04 17:19:28 浏览: 81
vue + element-ui实现按钮和权限管理动态路由
您好!针对您的问题,我理解您的需求是在使用 Vue 和 Element-UI 开发中,需要根据书籍 id 动态加载多个 assets 中以书籍 id 命名且与书籍 id 对应的图片。您可以按照以下步骤进行操作:
1. 在 Vue 组件中引入 Element-UI 中的 Upload 组件,并设置属性 action 为上传图片的接口地址。
2. 在接口中,将上传的图片保存到指定的文件夹中,并将图片的文件名设置为书籍 id。
3. 在 Vue 组件中使用 v-for 遍历书籍列表,并使用 v-bind:src 绑定书籍对应的图片地址。
4. 在绑定图片地址时,使用 require 动态加载图片,代码如下:
```javascript
<img v-bind:src="require(`@/assets/${book.id}.jpg`)">
```
其中,`@/assets/` 是指 assets 文件夹的路径,`${book.id}.jpg` 是指书籍对应的图片文件名。
通过这样的方式,您可以根据书籍 id 动态加载多个 assets 中以书籍 id 命名且与书籍 id 对应的图片。希望这个解答能够对您有所帮助!
阅读全文