显示效果：
代码：
html：文章来源：https://www.toymoban.com/news/detail-524244.html
<el-tooltip :content="setTip(item)" placement="bottom">
<img :src="setSrc(item)" alt="" width="20" height="20" />
</el-tooltip>js：文章来源地址https://www.toymoban.com/news/detail-524244.html
setTip(item) {
if (item.fileType === "pdf") {
return "PDF";
} else if (item.fileType === "html") {
return "HTML";
} else if (item.fileType === "docx") {
return "WORD";
} else if (item.fileType === "xlsx") {
return "EXCEL";
} else if (item.fileType === "csv") {
return "CSV";
} else {
return "DEFAULT";
}
},
setSrc(item) {
if (item.fileType === "pdf") {
return require("@/static/images/pdf.png");
} else if (item.fileType === "html") {
return require("@/static/images/html.png");
} else if (item.fileType === "docx") {
return require("@/static/images/word.png");
} else if (item.fileType === "xlsx") {
return require("@/static/images/excel.png");
} else if (item.fileType === "csv") {
return require("@/static/images/csv.png");
} else {
return require("@/static/images/default.png");
}
},到了这里，关于vue循环如何动态加载本地图片的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
