vue+element-ui动态显示多个assets中以书籍id命名且与书籍id对应的图片的具体代码
时间: 2024-02-18 19:01:14 浏览: 99
爱马仕后台管理系统源码,Vue+element-ui.zip
5星 · 资源好评率100%
假设你的书籍ID为bookId,你的图片文件名为bookId.jpg,那么你可以使用vue的v-bind指令和template字符串来动态绑定图片路径。代码示例如下:
```html
<template>
<div>
<img :src="getImgSrc(bookId)">
</div>
</template>
<script>
export default {
data() {
return {
bookId: 123 // 书籍ID
}
},
methods: {
getImgSrc(bookId) {
// 构造图片路径
return require(`@/assets/${bookId}.jpg`); // 假设图片存放在assets目录下
}
}
}
</script>
```
在上面的代码中,我们使用了require函数来动态加载图片,同时使用了template字符串来构造图片路径。需要注意的是,这里的路径是相对于当前文件的路径,因此要在路径前面加上@/表示根目录。
阅读全文