我正在使用"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
在浏览器中得到一个!
任何帮助,将不胜感激!