Question

你好社区。

我有一个反应组件，它正在渲染驻留在已安装文件夹中的图像。

当您启动应用程序时，此命令会运行

'sudo mount -t cifs -o username=<SECRETUSERNAME>,password=<SECRETPASSWORD>,domain=XXXXXXXXX,noperm "' + shareInfo.source + '" ' + shareInfo.target

它成功地挂载了我想要的文件夹，我看到了所有的图像，我可以将 url 路径插入到我的 React 应用程序中的 src 标签中，并且它们呈现得很好。

但这并不一致。有时他们渲染有时我得到一个断开的链接。网络选项卡显示（待定），图像从不加载。

有时当我刷新浏览器或清除缓存时，它会再次加载。

我服务器端从该文件夹中获取（从节点应用程序）所有路径名。并通过动态更改 src 标签来渲染图像。

/////    inputPicture.jsx    ///////
    const renderImage = (caller, src, showDisabledImageDiv) => {
        return (
            <img
                loading='eager'
                id={'image' + caller}
                style={{
                    position: 'relative',
                    height: 350,
                    width: 400,
                    zIndex: 1
                }}
                src={src} //src example: '/workInstructions/23InternalLabels.png'
            />
        );
    };
    
/////////    parentFormBuilder.jsx   ///////
/// all this information comes from meta comming from a mongoDB
/// it renders the above component ultimatley
if (propInfo.inputType === 'image') {
            mainInputEl = 
                <inputPicture 
                    placeHolder={propInfo.placeHolder} 
                    default={propInfo.default} 
                    disabled={propInfo.disabled ? propInfo.disabled : this.props.children &&    this.props.children.length > 0} 
                    staticImage={propInfo.staticImage} 
                    helperText={propInfo.helperText} 
                    label={propInfo.title} 
                    value={propInfo.default} 
                />;
        }
        
///// The images are located in the mounted folder like mentioned in the post. //////

我会添加尽可能多的 React 代码，而不会让人充满希望，并把看起来令人困惑的东西都说清楚。

这里也是我的 webpack.config.js

var webpack = require("webpack");
var path = require("path");
var SaveHashes = require("assets-webpack-plugin");
var config = require("config");

//used to read in command line args
const args = require('yargs').argv;

var useConfig;

if (args.env && args.env.useConfig){
    useConfig = args.env.useConfig; //must match a key of a configuration
} else {
    useConfig = config.get("useConfig"); //must match a key of a configuration
}

//define config object
var configuration = config.get(useConfig); //the configuration object that has the key of useConfig

var router = ["regenerator-runtime/runtime", "./react/router.jsx"];

if (configuration.router) {
    router = configuration.router;
}

//define global webpack variables that go into definePlugin
var release = (args.env && args.env.BUILD_RELEASE === "true");

var definePlugin = new webpack.DefinePlugin({
    __DEV__: !release,
    __RELEASE__: release,
    __HMR__: true
});

module.exports = {
    entry: {
        router: router
    },
    output: {
        path: path.join(__dirname, "public", "javascripts"),
        filename: "router-bundle.js",
        publicPath: "/javascripts/" // Relative to public folder
    },
    module: {
        loaders: [
            { test: /\.(wav|ttf|eot|svg|woff(2)?)(\?[a-z0-9]+)?$/, loader: "file-loader" },
            { test: /\.pug$/, loader: "pug-loader" },
            { test: /\.css$/, loader: "style-loader!css-loader" },
            { test: /\.scss$/, loader: "style-loader!css-loader!sass-loader" },
            { test: /\.(png|jpg)$/, loader: "url-loader?limit=32768" },
            {
                test: /.jsx?$/,
                loader: "babel-loader",
                exclude: /node_modules/,
                query: { presets: ["env", "react", "stage-2"] }
            },
            {
                test: /.js?$/,
                loader: "babel-loader",
                exclude: /node_modules/,
                query: { presets: ["env", "react", "stage-2"] }
            },
            { test: /\.json$/, loader: "json-loader" }
        ]
    },
    node: { fs: "empty" },
    externals: {
        react: "React",
        "react-dom": "ReactDOM",
        uiplugin: "UIFactory",
        "./cptable": "var cptable",
        "./jszip": "jszip"
    },
    resolve: {
        extensions: ["*", ".js", ".jsx"]
    },
    plugins: [definePlugin]
};

预期行为：每次进入视图时都会加载图像。当前行为：有时加载，有时不加载。

反应图像加载不一致，挂载文件上的图像

0 个答案: