Question

在next.config.js中-我添加了使用svg图像所需的配置。

public ArrayList<q> getAllQuestions() {
    ArrayList<q> array_list = new ArrayList<q>();

    SQLiteDatabase db = this.getReadableDatabase();
    Cursor res =  db.rawQuery( "select * from qdb",  null);
    res.moveToFirst();
    //int g = 0;
    q temp = new q();

    while(!res.isAfterLast()){
        temp.setQnum(res.getInt(0));
        temp.setQue(res.getString(1));
        temp.setA1(res.getString(2));
        temp.setA2(res.getString(3));
        temp.setA3(res.getString(4));
        temp.setA4(res.getString(5));
        temp.setCor(res.getInt(6));
        //temp = new q(res.getString(1), res.getString(2), res.getString(3),res.getString(4), res.getString(5), res.getInt(6));


        array_list.add(temp);
        res.moveToNext();
    }
    res.close();
    return array_list;
}

这是我的svg文件-他位于下一个文件夹= /client/assets/googleIcon.svg：

也许问题出在svg文件中，我没有svg的经验，这个svg是否正确？

const withCSS = require('@zeit/next-css');
const withSass = require('@zeit/next-sass');
const withImages = require('next-images');

module.exports = withCSS(
  withSass(
    {
      webpack: (config) => config,
      distDir: '../_next'
    },
    withImages({
      webpack(config, options) {
        return config;
      }
    })
  )
);

最后，我要导入此文件并尝试以以下方式显示img：

<svg version="1.1" width="100%" height="100%" viewBox="0 0 25 25"> <g fill="none" fillRule="evenodd"> <path d="M20.66 12.693c0-.603-.054-1.182-.155-1.738H12.5v3.287h4.575a3.91 3.91 0 0 1-1.697 2.566v2.133h2.747c1.608-1.48 2.535-3.65 2.535-6.24z" fill="#4285F4" /> <path d="M12.5 21c2.295 0 4.22-.76 5.625-2.06l-2.747-2.132c-.76.51-1.734.81-2.878.81-2.214 0-4.088-1.494-4.756-3.503h-2.84v2.202A8.498 8.498 0 0 0 12.5 21z" fill="#34A853" /> <path d="M7.744 14.115c-.17-.51-.267-1.055-.267-1.615s.097-1.105.267-1.615V8.683h-2.84A8.488 8.488 0 0 0 4 12.5c0 1.372.328 2.67.904 3.817l2.84-2.202z" fill="#FBBC05" /> <path d="M12.5 7.38c1.248 0 2.368.43 3.25 1.272l2.437-2.438C16.715 4.842 14.79 4 12.5 4a8.497 8.497 0 0 0-7.596 4.683l2.84 2.202c.668-2.01 2.542-3.504 4.756-3.504z" fill="#EA4335" /> </g> </svg>
{googleIcon}

当我运行应用程序时出现错误：

<img src={googleIcon} />

Answer 1

当我将esModule: false添加到选项时，它将起作用。

config.module.rules.push({
  test: /\.(eot|woff|woff2|ttf|svg|png|jpg|gif)$/,
  use: {
    loader: 'url-loader',
    options: {
      limit: 100000,
      name: '[name].[ext]',
      esModule: false,
    },
  },
});

Answer 2

我建议将svg包装在一个组件中，然后使用该组件：

function Icon () {
  return (
    <svg version="1.1" width="100%" height="100%" viewBox="0 0 25 25">
      <g fill="none" fillRule="evenodd">
        <path
          d="M20.66 12.693c0-.603-.054-1.182-.155-1.738H12.5v3.287h4.575a3.91 3.91 0 0 1-1.697 2.566v2.133h2.747c1.608-1.48 2.535-3.65 2.535-6.24z"
          fill="#4285F4"
        />
        <path
          d="M12.5 21c2.295 0 4.22-.76 5.625-2.06l-2.747-2.132c-.76.51-1.734.81-2.878.81-2.214 0-4.088-1.494-4.756-3.503h-2.84v2.202A8.498 8.498 0 0 0 12.5 21z"
          fill="#34A853"
        />
        <path
          d="M7.744 14.115c-.17-.51-.267-1.055-.267-1.615s.097-1.105.267-1.615V8.683h-2.84A8.488 8.488 0 0 0 4 12.5c0 1.372.328 2.67.904 3.817l2.84-2.202z"
          fill="#FBBC05"
        />
        <path
          d="M12.5 7.38c1.248 0 2.368.43 3.25 1.272l2.437-2.438C16.715 4.842 14.79 4 12.5 4a8.497 8.497 0 0 0-7.596 4.683l2.84 2.202c.668-2.01 2.542-3.504 4.756-3.504z"
          fill="#EA4335"
        />
      </g>
    </svg>
  )
}

ReactDOM.render(<Icon />, document.getElementById('app'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="app" />

如果您确实需要将svg加载为映像，则需要配置Webpack。

npm install @svgr/webpack

然后：

module.exports = {
  webpack(config) {
    config.module.rules.push({
      test: /\.svg$/,
      use: ['@svgr/webpack'],
    });

    return config;
  }
};

请参见this answer。

Answer 3

您需要将withImages嵌套到withSass函数中。这就是为什么这些函数将config作为参数的原因。

如果需要提供这些参数中的每一个，则可以将它们组合为嵌套最多的函数参数。

module.exports = withCSS(
  withSass(
    withImages({
      distDir: '../_next',
      webpack(config, options) {
        return config;
      }
    })
  )
);

如何在下一个js组件中使用svg图像？

3 个答案: