search

Home  >  Q&A  >  body text

javascript - problem with reference to image path

Picture reference:

1

2

<code><img src="../assets/image/setting.png"/>

</code>

Directory Structure:

Written relative to Lu Jin, why is the picture not displayed?
Console prompt:

webpack:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

<code>var path = require("path");

var webpack = require("webpack");

var HtmlWebpackPlugin = require("html-webpack-plugin");

 

module.exports = {

    entry: [

        "react-hot-loader/patch",

        "webpack-dev-server/client?http://0.0.0.0:3000",

        "webpack/hot/only-dev-server",

        "babel-polyfill",

        "whatwg-fetch",

        "./src/index"

    ],

    devServer: {

        hot: true,

        contentBase: path.resolve(__dirname, "dist"),

        port: 3000,

        host: "0.0.0.0",

        publicPath: "/",

        historyApiFallback: true,

        disableHostCheck: true,

        proxy: {

            "/agent": {

                target: "http://dn4:19000",

                changeOrigin: true,

            },

            "/api": {

                target: "http://dn4:19989",

                changeOrigin: true,

            },

            "/sign": {

                target: "http://dn4:19000",

                changeOrigin: true,

            },

            "/file": {

                target: "http://dn4:19000",

                changeOrigin: true,

            },

        }

    },

    output: {

        path: path.join(__dirname, "dist"),

        publicPath: "/",

        filename: "app.[hash].js"

    },

    devtool: "eval",

    module: {

        rules: [

            {

                test: /\.js$/,

                exclude: /node_modules/,

                loader: "babel-loader",

                options: {

                    presets: [

                        ["es2015", {"modules": false}],

                        "stage-0",

                        "react"

                    ],

                    plugins: [

                        "transform-async-to-generator",

                        "transform-decorators-legacy",

                        ["import", {"libraryName": "antd", "style": true}]

                    ]

                }

            },

            {

                test: /\.scss|css$/,

                use: [

                    "style-loader",

                    "css-loader",

                    "postcss-loader",

                    "resolve-url-loader",

                    "sass-loader?sourceMap"

                ]

            },

            {

                test: /\.less$/,

                use: [{

                    loader: "style-loader" // creates style nodes from JS strings

                }, {

                    loader: "css-loader" // translates CSS into CommonJS

                }, {

                    loader: "less-loader", options: {

                        modifyVars: {

                            "primary-color": "#0183ff",

                            "font-size-base": "16px",

                        }

                    } // compiles Less to CSS

                }]

            },

            {

                test: /\.(jpe?g|png|gif|svg)$/i,

                use: [

                    "file-loader?hash=sha512&digest=hex&name=[hash].[ext]",

                    {

                        loader: "image-webpack-loader",

                        options: {

                            progressive: true,

                            optimizationLevel: 7,

                            interlaced: false,

                            pngquant: {

                                quality: "65-90",

                                speed: 4

                            }

                        }

                    }

                ]

            },

            {

                test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,

                use: "url-loader?limit=10000&mimetype=application/font-woff"

            },

            {

                test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,

                use: "file-loader"

            }

        ]

    },

    plugins: [

        new webpack.NamedModulesPlugin(),

        new webpack.HotModuleReplacementPlugin(),

        new HtmlWebpackPlugin({hash: false, template: "./index.hbs"}),

        new webpack.ContextReplacementPlugin(/moment[\/\]locale$/, /nb/)

    ]

};

</code>

The reason was found:

1

<code>        contentBase: path.resolve(__dirname, "dist"),</code>

Lu Jin should write the path relative to dist
But now there is another problem! Pictures will definitely not be displayed in the production environment if written like this!
I don’t plan to put static resources under /dist, downstairs The following describes the method of static files. This should configure webpack. Is there any friend who can share it?

给我你的怀抱给我你的怀抱2832 days ago850

reply all(4)I'll reply

  • 学习ing

    学习ing2017-06-26 10:59:28

    The problem of static resources has been solved. Solution:
    Use a plug-in of webpack. When compiling in the production environment, you can copy the files in the /static directory to the /dist directory

    1

    2

    3

    4

    5

    6

    7

    8

    <code>new CopyWebpackPlugin([

        {

            from: path.resolve(__dirname, 'static'),

            to: path.resolve(__dirname, 'dist/static'),

            ignore: ['*.js']

        }

    ])

    </code>

    Webpack-devserver configuration during development:

    1

    2

    3

    <code>contentBase: path.resolve(__dirname),

    publicPath: "/",

    </code>

    In this way, you only need to write the absolute path /static/.. in the code

    reply
    0
  • 仅有的幸福

    仅有的幸福2017-06-26 10:59:28

    Where is the file where you wrote the img? "../assets/image/setting.png" is only valid if the file where you wrote the img is in the components directory.

    reply
    0
  • 我想大声告诉你

    我想大声告诉你2017-06-26 10:59:28

    If you use the webpack template of vue-cli, it will be converted into an absolute path, such as: /images/setting.png. It is recommended to put the image in the static folder.

    reply
    0
  • 扔个三星炸死你

    扔个三星炸死你2017-06-26 10:59:28

    The fixed paths are all placed under /static. The only place where the location remains unchanged before and after packaging

    reply
    0
  • Cancelreply