Javascript 将URL输入转换为图像

这个React应用程序接受文本输入（AddMovie.js）并将它们显示在另一个页面（MovieList.js）上

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

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

我是一个新的反应，我不太确定在哪里修改。任何帮助都将不胜感激

AddMovie的代码。我不确定是否所有事情都需要在updateImage（）下处理

const AddMovie=（）=>{
const[name，setName]=useState（“”）；
const[price，setPrice]=使用状态（“”）；
const[image，setImage]=useState（“”）；
const[movies，setMovies]=useContext（MovieContext）；
常量updateName=（e）=>{
设置名称（如目标值）；
};
const updatePrice=（e）=>{
设定价格（即目标价值）；
};
const updateImage=（e）=>{
setImage（即目标值）；
};
const addMovie=（e）=>{
e、 预防默认值（）；
setMovies（（prevMovies）=>[
…看电影，
{name:name，price:price，image:image}，
]);
};
返回(
输入产品名称




输入产品价格




输入图像地址






提交
);
};

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

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

export default Movie;

const Movie=（{name，price，image}）=>{
返回(
{name}
{price}
{image}
);
};
导出默认电影；

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

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;

const MovieList=（）=>{
const[movie，setMovie]=useContext（MovieContext）；
返回(
{movie.map（（movie）=>(
))}
);
};
导出默认电影列表；

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

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

export default Movie;

const Movie=（{name，price，image}）=>{
返回(
{name}
{price}
);
};
导出默认电影；

假设

电影。图像

包含URL

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

export default Movie;

const Movie=（{name，price，image}）=>{
返回(
{name}
{price}
);
};
导出默认电影；

---

这必须完成工作；）

下面的内容应该适合您。作为建议，我建议您将

image

重命名为

imageUrl

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

const Movie=（{name，price，image}）=>{
返回(
{name}
{price}
);
};

也许你在寻找完美的。谢谢大家!@Akainoto如果它对你有效，那么接受它作为正确的答案将帮助其他人发现它更容易

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