解决Vue中动态src图片不显示

图片的本地相对路径需要使用require包裹

<template><div><div v-for="item in imgList" :key="item.id"><img :src="item.src" /></div></div>
</template>
<script>
export default {name: "component3",data() {return {imgList: [{ id: 1, src: require("../static/play.png") },{ id: 2, src: require("../static/play.png") },{ id: 3, src: require("../static/play.png") },],};},
};
</script>
<style  scoped>
</style>

因为动态添加src被当做静态资源处理了，没有进行编译，使用require定义之后，就可以动态使用了。

解决Vue中动态src图片不显示相关推荐

自己解决在Vue中动态渲染图片不显示的问题
乐于助人前言分析思路 1. 绝对路径 2. 相对路径总结本篇文章记录的是自己在 Vue-Cli2 中如何去解决的这个问题,心里路程比较多,所以话比较多哈哈,感谢阅读,大概耗时2分钟前言如上 ...
vue中动态引入图片为什么要是require，你不知道的那些事
相信用过vue的小伙伴,肯定被面试官问过这样一个问题:在vue中动态的引入图片为什么要使用require 有些小伙伴,可能会轻蔑一笑:呵,就这,因为动态添加src被当做静态资源处理了,没有进行编译,所 ...
vue项目动态引入图片无法显示的问题
一.通过vue+webpack构建的前端项目前三张图片通过v-for动态引入src属性: <template><div class="container"> ...
Vue中动态（import 、require）显示img图片
vue中,经常会遇到显示图片的问题, 如果是一个普通组件的话,那么这样就可以了 <img src="../assets/images/avtor.jpg" width=&qu ...
VUE 中通过v-bind:src 图片不显示问题
VUE 中通过v-bind:src 图片不显示问题,引入图片的方式用require 即可 html: <img v-bind:src='imgUrl'> js:imgUrl:requir ...
vue上线后图片不显示_解决Vue打包后访问图片/图标不显示的问题
大家可否遇到过 npm run build打包后,项目在线上运行时,资源文件 (图片.图标)不显示的问题, 接下来,我给大家分享一下我的解决方案~ 1.检查打包后dist中的css文件打开此文件后 ...
TF之CNN：利用sklearn(自带手写数字图片识别数据集)使用dropout解决学习中overfitting的问题+Tensorboard显示变化曲线
TF之CNN:利用sklearn(自带手写数字图片识别数据集)使用dropout解决学习中overfitting的问题+Tensorboard显示变化曲线目录输出结果设计代码输出结果设计代码 ...
html上传动态图片不显示图片,解决 viewer.js 动态更新图片导致无法预览的问题
前台页面要求图片的查看,是在表格中点击查看才弹出图片,网上发现用Viewer插件的挺多,就选用的这款插件,但是Viewer插件会产生缩略图,这里取巧了,将缩略图统一替换成了一个带有查看两字的小图片,这 ...
vue 加载image图片不显示解决
vue 加载image图片不显示解决------------写了个vue的demo(自己做一个表格,可以横向增加列也可以纵向增加行)想给demo加图片怎么都出不来,,,,,查图片太大?加载位置不对?配 ...

解决Vue中动态src图片不显示

解决Vue中动态src图片不显示相关推荐

最新文章

热门文章