将URL输入转换为图像

Question

此React应用接收文本输入（AddMovie.js），并将它们显示在另一页（MovieList.js）。

输入一：电影名称和输入二：价格

使字符串显示非常简单，但是现在我想在第三个文本输入中输入图像URL，并显示图像以及名称和价格。

我是React的新手，我不确定在哪里修改。任何帮助将不胜感激。

AddMovie的代码。我不确定是否需要在updateImage（）下处理所有内容？

const AddMovie = () => {
  const [name, setName] = useState('');
  const [price, setPrice] = useState('');
  const [image, setImage] = useState('');

  const [movies, setMovies] = useContext(MovieContext);

  const updateName = (e) => {
    setName(e.target.value);
  };

  const updatePrice = (e) => {
    setPrice(e.target.value);
  };

  const updateImage = (e) => {
    setImage(e.target.value);
  };

  const addMovie = (e) => {
    e.preventDefault();
    setMovies((prevMovies) => [
      ...prevMovies,
      { name: name, price: price, image: image },
    ]);
  };

  return (
    <form onSubmit={addMovie}>
      Enter Product Title
      <br />
      <input type='text' name={name} onChange={updateName} />
      <br />
      Enter Product Price
      <br />
      <input type='text' price={price} onChange={updatePrice} />
      <br />
      Enter Image Address
      <br />
      <input id='image' type='text' image={image} onChange={updateImage} />
      <br />
      <br />
      <button>Submit</button>
    </form>
  );
};

每个单独的电影项目。不确定{image}是否正确。

const Movie = ({ name, price, image }) => {
  return (
    <div>
      <h2>{name}</h2>
      <h4>{price}</h4>
      <image>{image}</image>
    </div>
  );
};

export default Movie;

这是添加电影后显示的电影的列表。

const MovieList = () => {

  const [movie, setMovie] = useContext(MovieContext);

  return (
    <div>
      {movie.map((movie) => (
        <Movie name={movie.name} price={movie.price} image={movie.image} />
      ))}
    </div>
  );
};

export default MovieList;

Answer 1

图像不是本地html元素，因此您应该将Movie组件修改为

const Movie = ({ name, price, image }) => {
  return (
    <div>
      <h2>{name}</h2>
      <h4>{price}</h4>
      <img src={image} />
    </div>
  );
};

export default Movie;

Answer 2

假设movie.image包含URL

const Movie = ({ name, price, image }) => {
  return (
    <div>
      <h2>{name}</h2>
      <h4>{price}</h4>
      <img src={image} alt={name}>
    </div>
  );
};

export default Movie;

那必须做这份工作；）

Answer 3

以下内容应该为您工作。作为建议，我建议您将image重命名为imageUrl。

const Movie = ({ name, price, image }) => {
  return (
    <div>
      <h2>{name}</h2>
      <h4>{price}</h4>
      <img src={image} alt={name} />
    </div>
  );
};