0

我正在使用"next": "^9.4.4", 并且有： "next-images": "^1.4.0", "next-optimized-images": "^2.6.1",

这是我的next-config.js

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

module.exports = withImages(
  optimizedImages(
    withCSS(
      withSass({
        target: 'serverless',
        env: {
          MAPBOX_ACCESS_TOKEN:
            'TK421'
        },

        webpack(config, options) {
          config.module.rules.push({
            test: /\.(png|jpg|gif|svg|eot|ttf|woff|woff2)$/,
            use: {
              loader: 'url-loader',
              options: {
                limit: 100000,
                target: 'serverless'
              }
            }
          });

          return config;
        }
      })
    )
  )
);

但是在我的组件中，我得到了一个损坏的图像链接，这是我的组件：

import { useState, useEffect } from 'react';

import { Card, Icon, Image, Segment, Form } from 'semantic-ui-react';

import axios from 'axios';


function ImageUploader({ userAvatar }) {
  var [userAvatar, setUserAvatar] = useState(userAvatar);


  useEffect(() => {
    setUserAvatar(userAvatar);
  }, [userAvatar]);

  function fileUploader(e) {
    console.log('event fileUploader ', e);
    var imageFormObj = new FormData();

    console.log('e.target.files[0] ', e.target.files[0]);

    imageFormObj.append('imageName', 'multer-image-' + Date.now());
    imageFormObj.append('imageData', e.target.files[0]);
    setUserAvatar(window.URL.createObjectURL(e.target.files[0]));

    console.log('userAvatar ', userAvatar);
    console.log('imageFormObj ', imageFormObj);

    axios
      .post(`/users/uploadmulter`, imageFormObj)
      .then(data => {
        if (data.data.success) {
          alert('Image has been successfully uploaded using multer');
        }
      })
      .catch(err => {
        alert('Error while uploading image using multer');
      });
  }

  return (
    <>
          <Image
            src={require('../../public/static/uploads/profile-avatars/placeholder.jpg')}
            alt="user-avatar"
          />
    </>
  );
}

我也很困惑，因为在文档中似乎表明静态文件/图像支持开箱即用......

静态文件服务 Next.js 可以在根目录中名为 public 的文件夹下提供静态文件，如图像。然后，您的代码可以从基本 URL (/) 开始引用公共内部的文件。

例如，如果您将图像添加到 public/my-image.png，以下代码将访问该图像：

我已经按照他们的建议进行了尝试：

<Image src="/uploads/profile-avatars/placeholder.jpg" alt="user-avatar" />

有趣的是我没有404在浏览器中得到一个！

任何帮助，将不胜感激！

4

1 回答 1

1

您的图像必须位于保留名称为 public 的文件夹中。然后盒子里的报价就会起作用。

于 2020-07-18T20:29:46.710 回答