找不到图像404(next.js)

时间:2017-07-28 06:35:51

标签: image reactjs webpack compiler-errors next

我用于我的项目自定义webpack,效果很好:

const path = require('path');
const Webpack = require('webpack');

module.exports = {
  webpack: (config, { dev }) => {
    config.plugins.push(
      new Webpack.DefinePlugin([{
          __BROWSER__: "typeof window !== 'undefined'",
          __NETLIFY_BRANCH__: JSON.stringify(process.env.BRANCH),
          __CONFIG__: JSON.stringify({
            GRAPHQL_URL: process.env.GRAPHQL_URL,
            SEGMENT_WRITEKEY: process.env.SEGMENT_WRITEKEY,
          }),
        }])
      )
      config.module.rules.push(
        {
          test: /\.png$/,
          use: {
          loader: 'url-loader',
           options: {
             limit: 10000,
             name: 'graphics/[name].[ext]',
            },
           },
         },
         {
          test: /\.svg$/,
          use: [
            {
              loader: 'babel-loader',
              query: {
                presets: ['es2015']
              }
            },{
              loader: 'string-replace-loader',
              options: {
                // this is a bugfix because react complains about the xmlns attribute.  Its not
                // a valid attribute according to react.  React devs also say it's not needed
                // for svg.
                search: ' xmlns="http://www.w3.org/2000/svg"',
                replace: '',
                        },
                      },
                    ],
                  },
            );
      return config;
  },
};

但我也尝试将图像导入项目,如:

export default class Layout extends React.Component {
render () {
    return (
    <img src={'../static/logo.svg'} alt="logo" />
  )
 }
}

不幸的是,我收到错误,但项目正在运行。

http://localhost:3000/static/logo.svg 404 (Not Found)

“components”目录中的布局和“static”目录中的图像。两者都在根。

此外,我添加了JSON,可能是依赖项中的错误:

{
  "name": "",
  "version": "1.0.0",
  "main": "index.js",
  "author": "",
  "license": "MIT",
  "dependencies": {
    "babel-plugin-inline-react-svg": "^0.4.0",
    "babel-preset-es2015": "^6.24.1",
    "glamor": "^2.20.37",
    "glamor-media-query-presets": "^1.0.0",
    "js-cookie": "^2.1.4",
    "localforage": "^1.5.0",
    "next": "^2.4.8",
    "react-apollo": "^1.4.8",
    "react-burger-menu": "^2.1.4",
    "react-helmet": "^5.1.3",
    "typography": "^0.15.12",
    "typography-breakpoint-constants": "^0.15.10"
  },
  "babel": {
    "presets": [
      "next/babel"
    ],
    "plugins": [
      [
        "inline-react-svg",
        "transform-define",
        "./env-config.js"
      ]
    ]
  },
  "scripts": {
    "dev": "next"
  },
  "devDependencies": {
    "babel-plugin-inline-react-svg": "^0.4.0",
    "file-loader": "^0.11.2",
    "string-replace-loader": "^1.3.0",
    "url-loader": "^0.5.9"
  }
}

感谢。

0 个答案:

没有答案