Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
CoCo_Code_Op2
next.js
提交
3f07e554
N
next.js
项目概览
CoCo_Code_Op2
/
next.js
与 Fork 源项目一致
从无法访问的项目Fork
通知
1
Star
0
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
N
next.js
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
未验证
提交
3f07e554
编写于
10月 21, 2020
作者:
S
Steven
提交者:
GitHub
10月 21, 2020
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
Fix Image component defaults & remove autoOptimize (#18101)
上级
1a8cb7e1
变更
5
隐藏空白更改
内联
并排
Showing
5 changed file
with
32 addition
and
41 deletion
+32
-41
packages/next/build/webpack-config.ts
packages/next/build/webpack-config.ts
+0
-1
packages/next/client/image.tsx
packages/next/client/image.tsx
+19
-27
packages/next/next-server/server/config.ts
packages/next/next-server/server/config.ts
+2
-1
test/integration/image-component/basic/next.config.js
test/integration/image-component/basic/next.config.js
+0
-1
test/integration/image-component/basic/test/index.test.js
test/integration/image-component/basic/test/index.test.js
+11
-11
未找到文件。
packages/next/build/webpack-config.ts
浏览文件 @
3f07e554
...
...
@@ -994,7 +994,6 @@ export default async function getBaseWebpackConfig(
sizes
:
config
.
images
.
sizes
,
path
:
config
.
images
.
path
,
loader
:
config
.
images
.
loader
,
autoOptimize
:
config
.
images
.
autoOptimize
,
}),
'
process.env.__NEXT_ROUTER_BASEPATH
'
:
JSON
.
stringify
(
config
.
basePath
),
'
process.env.__NEXT_HAS_REWRITES
'
:
JSON
.
stringify
(
hasRewrites
),
...
...
packages/next/client/image.tsx
浏览文件 @
3f07e554
import
React
,
{
ReactElement
,
useEffect
,
useRef
}
from
'
react
'
import
Head
from
'
../next-server/lib/head
'
const
loaders
:
{
[
key
:
string
]:
(
props
:
LoaderProps
)
=>
string
}
=
{
imgix
:
imgixLoader
,
cloudinary
:
cloudinaryLoader
,
akamai
:
akamaiLoader
,
default
:
defaultLoader
,
}
const
loaders
=
new
Map
<
LoaderKey
,
(
props
:
LoaderProps
)
=>
string
>
([
[
'
imgix
'
,
imgixLoader
],
[
'
cloudinary
'
,
cloudinaryLoader
],
[
'
akamai
'
,
akamaiLoader
]
[
'
default
'
,
defaultLoader
],
])
type
LoaderKey
=
'
imgix
'
|
'
cloudinary
'
|
'
akamai
'
|
'
default
'
type
ImageData
=
{
sizes
?:
number
[]
loader
?:
string
path
?:
string
autoOptimize
?:
boolean
sizes
:
number
[]
loader
:
LoaderKey
path
:
string
}
type
ImageProps
=
Omit
<
...
...
@@ -30,11 +31,7 @@ type ImageProps = Omit<
)
const
imageData
:
ImageData
=
process
.
env
.
__NEXT_IMAGE_OPTS
as
any
const
breakpoints
=
imageData
.
sizes
||
[
640
,
1024
,
1600
]
// Auto optimize defaults to on if not specified
if
(
imageData
.
autoOptimize
===
undefined
)
{
imageData
.
autoOptimize
=
true
}
const
{
sizes
:
configSizes
,
loader
:
configLoader
,
path
:
configPath
}
=
imageData
let
cachedObserver
:
IntersectionObserver
const
IntersectionObserver
=
...
...
@@ -89,8 +86,8 @@ type CallLoaderProps = {
}
function
callLoader
(
loaderProps
:
CallLoaderProps
)
{
let
load
er
=
loaders
[
imageData
.
loader
||
'
default
'
]
return
load
er
({
root
:
imageData
.
path
||
'
/_next/image
'
,
...
loaderProps
})
let
load
=
loaders
.
get
(
configLoader
)
||
defaultLoader
return
load
({
root
:
configPath
,
...
loaderProps
})
}
type
SrcSetData
=
{
...
...
@@ -187,7 +184,7 @@ export default function Image({
const
imgSrcSet
=
!
unoptimized
?
generateSrcSet
({
src
,
widths
:
breakpoint
s
,
widths
:
configSize
s
,
quality
,
})
:
undefined
...
...
@@ -266,7 +263,7 @@ export default function Image({
{
shouldPreload
?
generatePreload
({
src
,
widths
:
breakpoint
s
,
widths
:
configSize
s
,
unoptimized
,
sizes
,
})
...
...
@@ -292,7 +289,7 @@ function normalizeSrc(src: string) {
}
function
imgixLoader
({
root
,
src
,
width
,
quality
}:
LoaderProps
):
string
{
const
params
=
[]
const
params
=
[
'
auto=format
'
]
let
paramsString
=
''
if
(
width
)
{
params
.
push
(
'
w=
'
+
width
)
...
...
@@ -300,9 +297,7 @@ function imgixLoader({ root, src, width, quality }: LoaderProps): string {
if
(
quality
)
{
params
.
push
(
'
q=
'
+
quality
)
}
if
(
imageData
.
autoOptimize
)
{
params
.
push
(
'
auto=compress
'
)
}
if
(
params
.
length
)
{
paramsString
=
'
?
'
+
params
.
join
(
'
&
'
)
}
...
...
@@ -314,11 +309,8 @@ function akamaiLoader({ root, src, width }: LoaderProps): string {
}
function
cloudinaryLoader
({
root
,
src
,
width
,
quality
}:
LoaderProps
):
string
{
const
params
=
[]
const
params
=
[
'
f_auto
'
]
let
paramsString
=
''
if
(
!
quality
&&
imageData
.
autoOptimize
)
{
quality
=
'
auto
'
}
if
(
width
)
{
params
.
push
(
'
w_
'
+
width
)
}
...
...
packages/next/next-server/server/config.ts
浏览文件 @
3f07e554
...
...
@@ -26,7 +26,8 @@ const defaultConfig: { [key: string]: any } = {
images
:
{
sizes
:
[
320
,
420
,
768
,
1024
,
1200
],
domains
:
[],
hosts
:
{
default
:
{
path
:
'
/_next/image
'
}
},
path
:
'
/_next/image
'
,
loader
:
'
default
'
,
},
devIndicators
:
{
buildActivity
:
true
,
...
...
test/integration/image-component/basic/next.config.js
浏览文件 @
3f07e554
module
.
exports
=
{
images
:
{
sizes
:
[
480
,
1024
,
1600
],
autoOptimize
:
false
,
path
:
'
https://example.com/myaccount/
'
,
loader
:
'
imgix
'
,
},
...
...
test/integration/image-component/basic/test/index.test.js
浏览文件 @
3f07e554
...
...
@@ -33,26 +33,26 @@ function runTests() {
})
it
(
'
should modify src with the loader
'
,
async
()
=>
{
expect
(
await
browser
.
elementById
(
'
basic-image
'
).
getAttribute
(
'
src
'
)).
toBe
(
'
https://example.com/myaccount/foo.jpg?q=60
'
'
https://example.com/myaccount/foo.jpg?
auto=format&
q=60
'
)
})
it
(
'
should correctly generate src even if preceding slash is included in prop
'
,
async
()
=>
{
expect
(
await
browser
.
elementById
(
'
preceding-slash-image
'
).
getAttribute
(
'
src
'
)
).
toBe
(
'
https://example.com/myaccount/fooslash.jpg
'
)
).
toBe
(
'
https://example.com/myaccount/fooslash.jpg
?auto=format
'
)
})
it
(
'
should add a srcset based on the loader
'
,
async
()
=>
{
expect
(
await
browser
.
elementById
(
'
basic-image
'
).
getAttribute
(
'
srcset
'
)
).
toBe
(
'
https://example.com/myaccount/foo.jpg?
w=480&q=60 480w, https://example.com/myaccount/foo.jpg?w=1024&q=60 1024w, https://example.com/myaccount/foo.jpg?
w=1600&q=60 1600w
'
'
https://example.com/myaccount/foo.jpg?
auto=format&w=480&q=60 480w, https://example.com/myaccount/foo.jpg?auto=format&w=1024&q=60 1024w, https://example.com/myaccount/foo.jpg?auto=format&
w=1600&q=60 1600w
'
)
})
it
(
'
should add a srcset even with preceding slash in prop
'
,
async
()
=>
{
expect
(
await
browser
.
elementById
(
'
preceding-slash-image
'
).
getAttribute
(
'
srcset
'
)
).
toBe
(
'
https://example.com/myaccount/fooslash.jpg?
w=480 480w, https://example.com/myaccount/fooslash.jpg?w=1024 1024w, https://example.com/myaccount/fooslash.jpg?
w=1600 1600w
'
'
https://example.com/myaccount/fooslash.jpg?
auto=format&w=480 480w, https://example.com/myaccount/fooslash.jpg?auto=format&w=1024 1024w, https://example.com/myaccount/fooslash.jpg?auto=format&
w=1600 1600w
'
)
})
it
(
'
should support the unoptimized attribute
'
,
async
()
=>
{
...
...
@@ -70,10 +70,10 @@ function runTests() {
function
lazyLoadingTests
()
{
it
(
'
should have loaded the first image immediately
'
,
async
()
=>
{
expect
(
await
browser
.
elementById
(
'
lazy-top
'
).
getAttribute
(
'
src
'
)).
toBe
(
'
https://example.com/myaccount/foo1.jpg
'
'
https://example.com/myaccount/foo1.jpg
?auto=format
'
)
expect
(
await
browser
.
elementById
(
'
lazy-top
'
).
getAttribute
(
'
srcset
'
)).
toBe
(
'
https://example.com/myaccount/foo1.jpg?
w=480 480w, https://example.com/myaccount/foo1.jpg?w=1024 1024w, https://example.com/myaccount/foo1.jpg?
w=1600 1600w
'
'
https://example.com/myaccount/foo1.jpg?
auto=format&w=480 480w, https://example.com/myaccount/foo1.jpg?auto=format&w=1024 1024w, https://example.com/myaccount/foo1.jpg?auto=format&
w=1600 1600w
'
)
})
it
(
'
should not have loaded the second image immediately
'
,
async
()
=>
{
...
...
@@ -101,11 +101,11 @@ function lazyLoadingTests() {
await
check
(()
=>
{
return
browser
.
elementById
(
'
lazy-mid
'
).
getAttribute
(
'
src
'
)
},
'
https://example.com/myaccount/foo2.jpg
'
)
},
'
https://example.com/myaccount/foo2.jpg
?auto=format
'
)
await
check
(()
=>
{
return
browser
.
elementById
(
'
lazy-mid
'
).
getAttribute
(
'
srcset
'
)
},
'
https://example.com/myaccount/foo2.jpg?
w=480 480w, https://example.com/myaccount/foo2.jpg?w=1024 1024w, https://example.com/myaccount/foo2.jpg?
w=1600 1600w
'
)
},
'
https://example.com/myaccount/foo2.jpg?
auto=format&w=480 480w, https://example.com/myaccount/foo2.jpg?auto=format&w=1024 1024w, https://example.com/myaccount/foo2.jpg?auto=format&
w=1600 1600w
'
)
})
it
(
'
should not have loaded the third image after scrolling down
'
,
async
()
=>
{
expect
(
...
...
@@ -166,14 +166,14 @@ describe('Image Component Tests', () => {
it
(
'
should add a preload tag for a priority image
'
,
async
()
=>
{
expect
(
await
hasPreloadLinkMatchingUrl
(
'
https://example.com/myaccount/withpriority.png
'
'
https://example.com/myaccount/withpriority.png
?auto=format
'
)
).
toBe
(
true
)
})
it
(
'
should add a preload tag for a priority image with preceding slash
'
,
async
()
=>
{
expect
(
await
hasPreloadLinkMatchingUrl
(
'
https://example.com/myaccount/fooslash.jpg
'
'
https://example.com/myaccount/fooslash.jpg
?auto=format
'
)
).
toBe
(
true
)
})
...
...
@@ -197,7 +197,7 @@ describe('Image Component Tests', () => {
it
(
'
should NOT add a preload tag for a priority image
'
,
async
()
=>
{
expect
(
await
hasPreloadLinkMatchingUrl
(
'
https://example.com/myaccount/withpriorityclient.png
'
'
https://example.com/myaccount/withpriorityclient.png
?auto=format
'
)
).
toBe
(
false
)
})
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录