Demo1 仅仅是在vue中
动态绑定的图片文件应该放在static下，地址写法是
imageUrl = '/static/image.png'
动态绑定的图片写法是
<img v-bind:src="imgUrl"/>
实例：
Home.vue 父组件
<template> <div class="homeClass"> <HomeCard v-for="i in msg" :msg="i" ></HomeCard> </div> </template> <!-- 主页 --> <script> import HomeCard from "@/components/HomeCard.vue" export default { components:{ HomeCard, }, data () { return { msg: [ { title:"title1", intro:'intro1', photoAdress:"/static/intro1.jpg" }, { title:"title2", intro:'intro2', photoAdress:"/static/intro2.jpg" }, { title:"title3", intro:'intro3', photoAdress:"/static/intro3.jpg" } ] } }, } </script> <!-- Add "scoped" attribute to limit CSS to this component only --> <style scoped> .homeClass{ padding-left: 130px; } </style>
homecard.vue 子组件
<template> <el-card class="box-card"> <h2> {{msg.title}} </h2> <span> {{msg.intro}} </span> <img v-bind:src="msg.photoAdress" alt="photo"> </el-card> </template> <script> export default { name: "HomeCard", data() { return {}; }, props: ['msg'] } </script> <style scoped> .box-card { width: 360px; float: left; margin: 0 33px 0px 0; } img { width: 310px; height: 280px; padding-top: 20px; padding-right: 30px; } </style>
Demo2 laravel+vue
使用require() （此方法同样适用于纯vue）
####在resources\assets\js创建staic文件，用于存放图片
实例
Home.vue
<template> <div class="homeClass"> <HomeCard v-for="msg in msgs" :msg="msg"></HomeCard> </div> </template> <!-- 主页 --> <script> import HomeCard from "./../components/HomeCard.vue" export default { components: { HomeCard, }, data() { return { msgs: [ { title: "title1", intro: 'intro1', photoAdress: require("./../static/intro1.jpg") , }, { title: "title2", intro: 'intro2', photoAdress: require("./../static/intro2.jpg") , }, { title: "title3", intro: 'intro3', photoAdress: require("./../static/intro3.jpg") , } ] } }, } </script> <!-- Add "scoped" attribute to limit CSS to this component only --> <style scoped> .homeClass { padding-left: 130px; } </style>
HomeCard.vue
<template> <el-card class="box-card"> <h2> {{msg.title}} </h2> <span> {{msg.intro}} </span> <img v-bind:src="msg.photoAdress" alt="photo"> </el-card> </template> <script> export default { name: "HomeCard", data() { return {}; }, props: ['msg'] } </script> <style scoped> .box-card { width: 360px; float: left; margin: 0 33px 0px 0; } img { width: 310px; height: 280px; padding-top: 20px; padding-right: 30px; } </style>
