Куда поместить картинки в приложении реакт и как к ним достучаться?

Question

[1233211]

Положил в папку public, где лежат index.html и favicon.ico, но как мне теперь достучаться до этой картинки из компонента через тег src?

Answer 1

[Mesuti]

Если собираете на Webpack, и картинка в src/img/image.svg
А выходная папка dist/

webpack.config в modules

{
    test: /\.(png|svg|jpg|gif)$/,
        use: [{
    loader: 'file-loader',
    options: {
        name: f => {
            let dirNameInsideAssets = path.relative(path.join(__dirname, 'src'), path.dirname(f));
            return `${dirNameInsideAssets}/[name].[ext]`;
        }
    }
}],
},

index.js
import "./img/image.svg";

В верстке
<img src="img/image.svg" alt=""/>

Comments

[AmirAsanov]

с svg также работает?

Answer 2

[McBernar]

Кладите картинки либо в src и импортируйте их через import.

Либо в паблик и обращайтесь напрямую, но без public. То есть, если картинка лежит в /public/images/cat.jpg, то обращаться к ней нужно через /images/cat.jpg

Comments

[AmirAsanov]

с svg также работает?

[notam]

Спасибо большое.