myimg-2.vue 1008 B

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859
  1. <template>
  2. <div align="center">
  3. <table :width="width">
  4. <tr class="header"><td v-if="title1">{{ title1 }}</td><td v-if="title2">{{ title2 }}</td></tr>
  5. <tr>
  6. <td width=50%><img :src="path1"></td>
  7. <td width=50%><img :src="path2"></td>
  8. </tr>
  9. </table>
  10. </div>
  11. </template>
  12. <style scoped>
  13. table {
  14. border : 1px solid black ;
  15. border-collapse: collapse;
  16. }
  17. th, td {
  18. padding: 15px;
  19. border : 1px solid black ;
  20. text-align: left;
  21. }
  22. .header {
  23. background-color:grey ;
  24. color : white ;
  25. }
  26. img {
  27. object-fit: contain;
  28. }
  29. </style>
  30. <script>
  31. export default {
  32. computed : {
  33. path1 : function() { return "/" + this.me + "/images/" + this.data1 } ,
  34. path2 : function() { return "/" + this.me + "/images/" + this.data2 }
  35. } ,
  36. props : {
  37. me : String ,
  38. width : String ,
  39. title1 : String ,
  40. title2 : String ,
  41. data1 : String ,
  42. data2 : String ,
  43. } ,
  44. methods : {
  45. }
  46. }
  47. </script>