小编lar*_*_82的帖子

检查获取请求时图像的状态

我正在尝试检查 get 生成的图像的状态。如果结果是 404,我必须显示另一个图像,图像链接始终存在,但有时图像没问题,另一个返回 404..

我究竟做错了什么?谢谢!

已经尝试过:

if(data['img_info'] == 404) // always returns false even the image link is broke.
also whit data['img_info'].naturalWidth === 0 // whit the same result..
finaly i use the catch..
Run Code Online (Sandbox Code Playgroud)

这是代码:

fetch('url')
.then(function (response) {
  return response.json();
}).then(function (data) {
  const img_info = data['img-info']

    $('#content').css({'background-image' : 'url(' + img_info + ')','background-size': 'cover'})

}).catch(function () {
    console.log('error')
    const img_default = 'http://localhost/img/img-default.png'
    $('#content').css({'background-image' : 'url(' + img_default + ')','background-size': 'cover' })

  console.log("Error");

});
Run Code Online (Sandbox Code Playgroud)

同样的情况发生在反应组件中..甚至图像被破坏了

addDefaultSrc(ev){
    ev.target.src = …
Run Code Online (Sandbox Code Playgroud)

javascript reactjs

5
推荐指数
0
解决办法
172
查看次数

Nextjs 中的样式组件延迟设置属性

我正在尝试styled-components使用 Nextjs 在 React 项目中实现。问题是,虽然我可以实现并看到样式,但是当我在浏览器上看到它时会有一点延迟。首先加载没有样式的组件,22 毫秒后应用样式。我做错了什么?谢谢

这是我的代码!

页面/index.js

import React from "react";
import Home from "../components/home/index";


const index = () => {
  return (
    <React.Fragment>
        <Home />
    </React.Fragment>
  );
};

export default index;
Run Code Online (Sandbox Code Playgroud)

组件/home.js

import React from "react";
import styled from 'styled-components';

const Title = styled.h1`
  color: red;
`;

function Home() {
  return (
    <div>
      <Title>My First Next.js Page</Title>
    </div>
  );
}

export default Home;
Run Code Online (Sandbox Code Playgroud)

babel.rc

{
  "presets": ["next/babel"],
  "plugins": [["styled-components", { "ssr": true }]]
}
Run Code Online (Sandbox Code Playgroud)

页面/_document.js

import …
Run Code Online (Sandbox Code Playgroud)

javascript reactjs server-side-rendering next.js

5
推荐指数
1
解决办法
2020
查看次数