Question

我已经列出了包含书籍的清单，到目前为止，除无法使之工作的图像外，其他所有东西都在起作用。在我的列表中，我想放置图像URL，然后希望显示该图像。

const list = [
   {
      authorName: 'Robin',
      img: 'https://marketplace.canva.com/EADanktU9AE/1/0/251w/canva-green-beach-photo-book-cover-o2wPCwYqW2w.jpg',
      bookName: 'Smart shopping',
      description: 'This is the first book',
      price: '$15'
   },
];

const Main = () => (
   <div className="main-wrapper">
      {list.map(item => (
         <div>
            <h1>{item.authorName}</h1>
            <img src="{item.img}" alt=""/>
            <h2>{item.bookName}</h2>
            <p>{item.description}</p>
            <h3>{item.price}</h3>
         </div>
      ))}
   </div>
);

ReactDOM.render(<Main />, document.body);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

Answer 1

只需删除图像标签中的引号即可。这里的引号将值作为字符串，因此src属性值在编译时看起来像src = "{item.img}"，删除引号将替换确切的URL。

<img src={item.img} alt=""/>

Answer 2

您需要删除src中的双引号，而只需要放花括号即可。

const list = [
   {
      authorName: 'Robin',
      img: 'https://marketplace.canva.com/EADanktU9AE/1/0/251w/canva-green-beach-photo-book-cover-o2wPCwYqW2w.jpg',
      bookName: 'Smart shopping',
      description: 'This is the first book',
      price: '$15'
   },
];

const Main = () => (
   <div className="main-wrapper">
      {list.map(item => (
         <div>
            <h1>{item.authorName}</h1>
            <img src={item.img} alt=""/>
            <h2>{item.bookName}</h2>
            <p>{item.description}</p>
            <h3>{item.price}</h3>
         </div>
      ))}
   </div>
);

ReactDOM.render(<Main />, document.body);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

Answer 3

替换

<img src="{item.img}" alt=""/>

使用

<img src={item.img} alt=""/>

反应-无法从列表加载图像

3 个答案: