ブラウザのURLが自動的に別の `）`を追加しますか？

Question

私はimageUrl、
を返すための機能を持っていると私は、コンソールが右url(../../../../assets/images/bottom/123.png)
でチェックしかし、ブラウザで、それが画像

function getImage(imageName) { 
    const imagePath = '../../../../assets/images/bottom'; 
    const imageUrl = `url(${imagePath}/${imageName})`; 
    console.log(imageUrl," --!!!!!!!!!!") 
    return imageUrl 
} 

getImage('123.png') // url(../../../../assets/images/bottom/123.png) 

を見つけることができないように )を追加し、なぜ私は知りません

HTML

<img src={ getImage('123.png') } /> 

Chromeブラウザのコンソール：

GET http://127.0.0.1:3000/assets/images/bottom/123.png) 404 (Not Found) 

私のコードで何が問題になっていますか？

Answer 1

img srcには、../../../../assets/images/bottom/123.pngではなく、url(../../../../assets/images/bottom/123.png)が指定されています。終わりのかっこ（ただし、最初は何もない）は、ブラウザがナンセンスの意味を理解しようとした結果です。 url(...)はCSSです。あなたは言語を混ぜてきました。

Answer 2

私は答えについて全くわからないんだけど、私はあなたの問題はoccurrsどこ

const imageUrl = `url(${imagePath}/${imageName})`; 

があると信じています。それは私があなただったら、私はいくつかのものを試したい

const imageUrl = `url(${imagePath}/${imageName}`; 

なるよう 、最後に）削除してください。