diego3g/electron-typescript-react

How to reference image?

Closed this issue · 2 comments

Tried to add file to assets and public but it doesn't find it.

Can you try explaining a little bit more about the problem? Are you trying to use an image inside the React code or inside the electron code as an icon or tray image?

For react images you should be able to add the desired loader to webpack and start loading imagens, we do not ship application specific loaders within webpack configuration, but you should be able to use svg-loader for SVGs and file-loader or url-loader for other images.

Yeah sure, I was trying to use an image inside React, to be used inside a component. I though that adding it to the page "assets" and referencing it as an absolute path would work, but it didn't.

I was able to make it work using the CopyWebpackPlugin to include the assets folder in the project after webpack build, and referencing images like '/assets/path-to-image';

This is how my renderer.webpack.js looks like now

const path = require('path');
const CopyWebpackPlugin = require('copy-webpack-plugin');

module.exports = {
  resolve: {
    extensions: ['.ts', '.tsx', '.js']
  },
  module: {
    rules: require('./rules.webpack'),
  },
  plugins: [
    new CopyWebpackPlugin({
      patterns: [
        {
          from: path.resolve(__dirname, '../assets'),
          to: 'assets'
        }
      ]
    })
  ]
}