将图像uri从一个组件传递到另一个组件。

// 父组件
import React from 'react';
import ChildComponent from './ChildComponent';

const ParentComponent = () => {
  const imageURI = 'https://example.com/image.jpg';

  return (
    <div>
      <ChildComponent imageURI={imageURI} />
    </div>
  );
};

export default ParentComponent;

// 子组件
import React from 'react';

const ChildComponent = (props) => {
  const { imageURI } = props;

  return (
    <div>
      <img src={imageURI} alt="Image" />
    </div>
  );
};

export default ChildComponent;

<!-- 父组件 -->
<template>
  <div>
    <child-component :image-uri="imageURI"></child-component>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent,
  },
  data() {
    return {
      imageURI: 'https://example.com/image.jpg',
    };
  },
};
</script>

<!-- 子组件 -->
<template>
  <div>
    <img :src="imageURI" alt="Image" />
  </div>
</template>

<script>
export default {
  props: ['imageURI'],
};
</script>

// 父组件
import { Component } from '@angular/core';

@Component({
  selector: 'app-parent-component',
  template: `
    <app-child-component [imageURI]="imageURI"></app-child-component>
  `,
})
export class ParentComponent {
  imageURI = 'https://example.com/image.jpg';
}

// 子组件
import { Component, Input } from '@angular/core';

@Component({
  selector: 'app-child-component',
  template: `
    <div>
      <img [src]="imageURI" alt="Image" />
    </div>
  `,
})
export class ChildComponent {
  @Input() imageURI: string;
}