iT邦幫忙

1

ES6 backgroundImage 讀本機圖片 問題

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

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

1 個回答

1
dragonH
iT邦大師 1 級 ‧ 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

沒錯吧

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

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

dragonH iT邦大師 1 級 ‧ 2019-11-08 21:20:56 檢舉

他這是 react 的專案唷

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

所以 prod 跟 dev 我都試過了XD /images/emoticon/emoticon13.gif

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

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

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

我發現我網址貼錯哈哈哈/images/emoticon/emoticon07.gif

dragonH iT邦大師 1 級 ‧ 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 也是正常啊

sion iT邦新手 5 級 ‧ 2019-11-08 22:24:46 檢舉

看完大大的回文我真是如夢初醒阿~~
我是沒有設size所以顯示原圖看起來像沒效果一樣都是白底
/images/emoticon/emoticon10.gif

dragonH iT邦大師 1 級 ‧ 2019-11-08 22:35:29 檢舉

所以鍋根本不在 backgroundImage 上 XD

/images/emoticon/emoticon01.gif

sion iT邦新手 5 級 ‧ 2019-11-08 23:39:52 檢舉

如果沒上來發問可能過2天才想的到沒設SIZE
/images/emoticon/emoticon37.gif

我要發表回答

立即登入回答