在React JS中动态加载图像

Question

我正试图根据从数据库检索的一些信息动态地从我的图像文件夹中获取图像。我用尽了所有的资源，但还是无法解决这个问题。下面是我的代码:

import scimitar from "../../images/scimitar.png";
import defender from "../../images/defender.png";
import arrows from "../../images/arrows.png";
import cape from "../../images/cape.png";
import platebody from "../../images/platebody.png";
const ItemCard = ({ item }) => {

return (
<div>
<p key={item.id}>ID: {item.id}</p>
<p>Name: {item.name}</p>
<p>{item.examine}</p>
<p>
<Link to={`/items/${item.id}`}>{item.name}</Link>
</p>
<img src={require(item.name)} alt={item.examine} />
</div>
)
}
const ItemList = () => {
const [items, setItems] = useState(null);
const populateItems = async () => {
const data = await getItems();
setItems(data);
};
useEffect(() => populateItems(), []);

return (
<div>
{items &&
items.map((item, index) => (
<ItemCard item={item} key={index} />
))
}
</div>
)
}

Answer 1

看起来有几个问题正在发生。使用模板字面量，如

<img src={`../../images/${item.name}.png`} alt={item.examine} />

也不行。原因是src不会获取图片的路径，它会查看您的网站使用的url。你需要设置你的React应用程序来提供公共图像(例如，确保像localhost:1337/images/schimitar.png这样的东西工作)。

只有这样你才能用

引用它

<img src={`/images/${item.name}.png` />

要在create-react-app中提供静态文件，请查看此链接。如果你有另一个设置，你需要使用babel-plugin-file-loader之类的东西来服务公共资产。

Answer 2

不知道为什么这样做，但我把图像的路径在一个变量中传递给图像标签的src路径。

const ItemCard = ({ item }) => {
const imageItem = `/images/${item.name}.png`;
return (
<div>
<p key={item.id}>ID: {item.id}</p>
<p>Name: {item.name}</p>
<p>{item.examine}</p>
<span>Quantity: {item.quantity}</span>
<p>
<Link to={`/items/${item.id}`}>{item.name}</Link>
</p>
<img src={imageItem} alt={item.examine} />
</div>
)
}
export default ItemCard;

Answer 3

<img src={item.name} alt={item.examine} />

Answer 4

如果您试图从静态路径获取图像，请尝试下面的代码。

import image1 from 'images/image1.png';
<img src={image1} alt="image1" />

如果您正在尝试动态添加图像，请尝试以下代码，

const imgName = "image1.png"
return (
<div>
{ imgName && <img src={`images/${imgName}`} alt="imgName" /> }
</div>
)