我從 axios 呼叫中獲得了 features_image，影像保存在 src 檔案夾 src/img 中。這是一個字串，它等于“../img/blog1.jpg”。
我無法顯示背景影像，我相信它需要以某種方式轉換為靜態影像。
import React from "react";
import { Link, NavLink } from 'react-router-dom';
const Post = ({ post: { title,
featured_image, category, slug, summary }, index }) => {
return (
<div>
<div role="listitem" className="post-v1 w-dyn-item">
<div className="post-card-v1">
<Link to={slug} className="post-v1-thumb w-inline-block">
<div className="post-v1-image" style={{backgroundImage: "url(" featured_image ")"}}></div>
</Link>
<div className="post-v1-content">
<div className="post-card-more-info">
<div className="badge post-v1-badge">{category}</div>
</div>
<Link to={slug} className="link-white w-inline-block hover-blog">
<h4 className="uppercase text-white">{title}</h4>
</Link>
<div className="text-white">{summary}</div>
</div>
</div>
</div>
</div>
);
};
export default Post;
uj5u.com熱心網友回復：
如果您在反應應用程式中使用靜態影像，您最好將它們移動到public檔案夾
'img/1.jpg'
假設您將整個檔案夾 img 移至 public 的features_image 值示例
為什么我要把它們放在公共檔案夾中？回答：
- 如果你將任何型別的檔案放入 public 檔案夾，它不會被 webpack 處理。它將按原樣復制到構建檔案夾中。
- 使用同一路徑訪問此檔案（html/img）的所有組件/頁面，無論檔案夾中的組件是否深
uj5u.com熱心網友回復：
既然你在括號里，你寫的是js，所以你應該使用字串插值：
style={{ backgroundImage: `url(${featured_image})`}}
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/492501.html
標籤：javascript 反应