0

In my React app I can import images fine everywhere, apart from one place where I try and pass in an image path to a component.

const Component = ({ imgLink }) => {

const img = imgLink ? (<img src={imgLink} alt="whatever"/>) : ''

return (<div>
            {img}
        </div>)
}

Then in my parent component:

import nicePicture from '../../assets/img/global/nice-picture.jpg'

const ParentComponent = () => {

    const img = imgLink ? (<img src={imgLink} alt="whatever"/>) : ''

    return (<Component imgLink={nicePicture} />)
    //I have also tried passing this is as a string (i.e.'../../assets/img/global/nice-picture.jpg'), 
    //but then the image breaks
}   

When I try and build this I get

/Users/me/projects/app/client/node_modules/babel-cli/node_modules/babel-core/lib/transformation/file/index.js:590
  throw err;
  ^

SyntaxError: /Users/me/projects/app/client/src/assets/img/global/nice-picture.jpg: Unexpected character '�' (1:0)
> 1 | ���� 

And here is my Webpack image loader config:

{
    test: /\.(ico|jpg|png|gif|eot|otf|webp|svg|ttf|woff|woff2)(\?.*)?$/,
    exclude: /\/favicon.ico$/,
    loader: 'file',
    query: {
      name: 'static/media/[name].[hash:8].[ext]'
    }
  }

Any idea what could be causing this?

EDIT: These are also my babel settings:

 loaders: [
  {
    test: /\.js$/,
    include: paths.appSrc,
    loader: 'babel',
    query: require('./babel.prod')//this file is below
  }

]

module.exports = {
 babelrc: false,
 presets: [
  require.resolve('babel-preset-latest'),
  require.resolve('babel-preset-react')
 ],
 plugins: [
   require.resolve('babel-plugin-transform-function-bind'),
   require.resolve('babel-plugin-transform-class-properties'),
   require.resolve('babel-plugin-transform-object-rest-spread'),
  [require.resolve('babel-plugin-transform-regenerator'), {
    async: false
  }],
  [require.resolve('babel-plugin-transform-runtime'), {
     helpers: false,
     polyfill: false,
     regenerator: true,
     moduleName: path.dirname(require.resolve('babel-runtime/package'))
   }],
  ]
}
MDalt
  • 1,681
  • 2
  • 24
  • 46
  • That looks like you apply babel to the image, do you maybe have a rule that matches the image somehow and tries to use `babel-loader`? – Michael Jungo Mar 16 '17 at 18:44
  • Hmm mayyybe that's what I'm missing - I'm not too hot in the babel department! I'm editing now with my babel settings if that helps... – MDalt Mar 16 '17 at 20:14

0 Answers0