2016-09-22 11 views
5

कभी भी मैं html में एक छवि टैग को जोड़ने और मैं कुछ इस तरह करते हैं:Angular2 छवि नहीं दिखाई दे रहा

<img src="../resources/img/myimg.png"> 

छवि प्रदर्शित नहीं करता है। इसके बजाय मुझे यह दिखा रहा है कि empty image

मैंने अपने index.html सिर में <base href="/"> डालने का प्रयास किया है लेकिन मुझे कोई बदलाव नहीं आया है। इसका कारण क्या हो सकता है? इस काम को करने के लिए मुझे और क्या करना चाहिए?

मैं भी यहाँ छवि webpack-लोडर स्थापित करने की कोशिश की, मेरी webpack.config.js की सामग्री

var webpack = require('webpack'); 
 
var path = require('path'); 
 

 

 
// Webpack Config 
 
var webpackConfig = { 
 
    entry: { 
 
    'polyfills': './src/polyfills.browser.ts', 
 
    'vendor': './src/vendor.browser.ts', 
 
    'main':  './src/main.browser.ts', 
 
    }, 
 

 
    output: { 
 
    path: __dirname + '/dist', 
 
    }, 
 

 
    plugins: [ 
 
    new webpack.optimize.OccurenceOrderPlugin(true), 
 
    new webpack.optimize.CommonsChunkPlugin({ name: ['main', 'vendor', 'polyfills'], minChunks: Infinity }), 
 
    ], 
 

 
    module: { 
 
    loaders: [ 
 
     // .ts files for TypeScript 
 
     { test: /\.ts$/, loaders: ['awesome-typescript-loader', 'angular2-template-loader'] }, 
 
     { test: /\.css$/, loaders: ['to-string-loader', 'css-loader'] }, 
 
     { test: /\.html$/, loader: 'raw-loader' }, 
 
     { 
 
    test: /.*\.(gif|png|jpe?g|svg)$/i, 
 
    loaders: [ 
 
     'file?hash=sha512&digest=hex&name=[hash].[ext]', 
 
     'image-webpack?{progressive:true, optimizationLevel: 7, interlaced: false, pngquant:{quality: "65-90", speed: 4}}' 
 
    ] 
 
    } 
 
    ] 
 
    } 
 

 
}; 
 

 

 
// Our Webpack Defaults 
 
var defaultConfig = { 
 
    devtool: 'cheap-module-source-map', 
 
    cache: true, 
 
    debug: true, 
 
    output: { 
 
    filename: '[name].bundle.js', 
 
    sourceMapFilename: '[name].map', 
 
    chunkFilename: '[id].chunk.js' 
 
    }, 
 

 
    resolve: { 
 
    root: [ path.join(__dirname, 'src') ], 
 
    extensions: ['', '.ts', '.js'] 
 
    }, 
 

 
    devServer: { 
 
    historyApiFallback: true, 
 
    watchOptions: { aggregateTimeout: 300, poll: 1000 } 
 
    }, 
 

 
    node: { 
 
    global: 1, 
 
    crypto: 'empty', 
 
    module: 0, 
 
    Buffer: 0, 
 
    clearImmediate: 0, 
 
    setImmediate: 0 
 
    } 
 
}; 
 

 
var webpackMerge = require('webpack-merge'); 
 
module.exports = webpackMerge(defaultConfig, webpackConfig);

+0

एफ 12 पर क्लिक करें और देखें कि आपके ब्राउज़र में कंसोल आउटपुट क्या है। –

उत्तर

7

आप base href दायरे से बाहर नहीं कर सकते फ़ाइल है आप src निर्देशिका के अंदर अपनी संपत्ति को स्थानांतरित करना चाहिए और पथ देने के बाद ./resources यह src/resources होगा।

+0

मेरी फ़ोल्डर संरचना मुझे यह 'src'' पसंद है 'ऐप' और 'ऐप' में 'संसाधन' फ़ोल्डर और प्रत्येक अलग घटक के लिए एक फ़ोल्डर है। यह एक घटक के एचटीएमएल लेआउट से है कि मैं संसाधन फ़ोल्डर के अंदर संग्रहीत आईएमजी फाइलों को जोड़ने के लिए सापेक्ष लेआउट का उपयोग कर रहा हूं। – akinmail

+0

धन्यवाद यह काम किया। अब मैं समझता हूं कि 'बेस href' क्या करता है। यद्यपि काफी शर्मनाक है। – akinmail

संबंधित मुद्दे