ES6 backgroundImage 讀本機圖片問題

javascript react jsx

sion 2019-11-08 20:34:49 ‧ 1438 瀏覽

分享至

我在使用backgroundImage讀取本機圖片時遇到了一點問題
也查過stackoverflow了，但還是讀取不到。
想請問有其他方法嗎?

const style = {
        backgroundImage: `url(${process.env.PUBLIC_URL}/Image/Deafult.png)` 
        };
         <span style={style} >
         ...
         </span>

登入發表討論

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

1 個回答

dragonH

iT邦超人 5 級 ‧ 2019-11-08 20:59:26

最佳解答

<img src = {`${process.env.PUBLIC_URL}/Image/logo192.png`} alt = "demo"/>
<img src = "/Image/logo192.png" alt = "demo"/>

這兩種都不行嗎?

我剛測試這兩種在 prod 跟 dev 都正常

那你最後到前端的網址長怎麼樣呢?

另外

你的圖片路徑應該是 public/Image/Deafult.png

沒錯吧

回應 8
分享
檢舉

看更多先前的回應...收起先前的回應...

㊣浩瀚星空㊣ iT邦大神 1 級 ‧ 2019-11-08 21:17:30 檢舉

你要先確定一下，他的本機是指客戶本機還是server本機。
他想讀的是當下電腦的還是server電腦的圖片。

dragonH iT邦超人 5 級 ‧ 2019-11-08 21:20:56 檢舉

他這是 react 的專案唷

所以應該不是一般的圖片路徑問題

所以 prod 跟 dev 我都試過了XD

sion iT邦新手 4 級 ‧ 2019-11-08 21:52:40 檢舉

我用img可以使用原本方法讀到，但是我想用在其他tag的backgroundImage裡面，試了能想(找)到的方法，都沒辦法成功

sion iT邦新手 4 級 ‧ 2019-11-08 21:56:57 檢舉

我發現我網址貼錯哈哈哈

dragonH iT邦超人 5 級 ‧ 2019-11-08 22:00:57 檢舉

sion

  const style = {
    backgroundImage: `url(${process.env.PUBLIC_URL}/Image/logo192.png)`,
    width: '200px',
    height: '200px',
  };
  return (
    <div className="App">
      <img src = {`${process.env.PUBLIC_URL}/Image/logo192.png`} alt = "demo"/>
      <img src = "/Image/logo192.png" alt = "demo"/>
      <div style = { style }></div>
    </div>
  );

backgroundImage 也是正常啊