reactjs - Image not found 404 (next.js) -


i use project custom webpack , works great:

const path = require('path'); const webpack = require('webpack');  module.exports = {   webpack: (config, { dev }) => {     config.plugins.push(       new webpack.defineplugin([{           __browser__: "typeof window !== 'undefined'",           __netlify_branch__: json.stringify(process.env.branch),           __config__: json.stringify({             graphql_url: process.env.graphql_url,             segment_writekey: process.env.segment_writekey,           }),         }])       )       config.module.rules.push(         {           test: /\.png$/,           use: {           loader: 'url-loader',            options: {              limit: 10000,              name: 'graphics/[name].[ext]',             },            },          },          {           test: /\.svg$/,           use: [             {               loader: 'babel-loader',               query: {                 presets: ['es2015']               }             },{               loader: 'string-replace-loader',               options: {                 // bugfix because react complains xmlns attribute.  not                 // valid attribute according react.  react devs it's not needed                 // svg.                 search: ' xmlns="http://www.w3.org/2000/svg"',                 replace: '',                         },                       },                     ],                   },             );       return config;   }, };

but try import image project like:

export default class layout extends react.component { render () {     return (     <img src={'../static/logo.svg'} alt="logo" />   )  } }

unfortunately, i receive error, project running. 

http://localhost:3000/static/logo.svg 404 (not found)

layout in directory "components" , images in directory "static". both in root.

also add json, maybe wrong in dependencies:

{   "name": "",   "version": "1.0.0",   "main": "index.js",   "author": "",   "license": "mit",   "dependencies": {     "babel-plugin-inline-react-svg": "^0.4.0",     "babel-preset-es2015": "^6.24.1",     "glamor": "^2.20.37",     "glamor-media-query-presets": "^1.0.0",     "js-cookie": "^2.1.4",     "localforage": "^1.5.0",     "next": "^2.4.8",     "react-apollo": "^1.4.8",     "react-burger-menu": "^2.1.4",     "react-helmet": "^5.1.3",     "typography": "^0.15.12",     "typography-breakpoint-constants": "^0.15.10"   },   "babel": {     "presets": [       "next/babel"     ],     "plugins": [       [         "inline-react-svg",         "transform-define",         "./env-config.js"       ]     ]   },   "scripts": {     "dev": "next"   },   "devdependencies": {     "babel-plugin-inline-react-svg": "^0.4.0",     "file-loader": "^0.11.2",     "string-replace-loader": "^1.3.0",     "url-loader": "^0.5.9"   } }

thanks.

you import image , use this

import logo './logo.svg'  <img src={logo} alt={"logo"}/>

Comments

Post a Comment

Popular posts from this blog

Add new key value to json node in java -

i have json file : { "id":1, "name":"abc", "addressdetails": { "city":"newyork" } } i wanted add 1 more key-value ("pincode" : "414141") node 'addressdetails'. i tried using : objectmapper mapper = new objectmapper(); jsonnode root = mapper.readtree(new file("d://test.json")); objectnode node = mapper.createobjectnode(); node.with("addressdetails").put("pincode", "414141"); but it's not getting added, there way can ? you can try you should modify file path objectmapper mapper = new objectmapper(); objectnode nodes = mapper.readvalue(new file("d:\\test.txt"), objectnode.class); nodes.with("addressdetails").put("pincode", "414141"); mapper.writer().writevalue(new file("d:\\test.txt"), nodes);
Read more

php - Vagrant up error - Uncaught Reflection Exception: Class DOMDocument does not exist -

i've set bento/ubuntu-16.04 vagrant box using php 5.6, , getting following error quite few times when try , run shell script: "uncaught reflection exception: class domdocument not exist". i've tried adding following top of script (not together), each no success: "sudo apt-get install php5.6-xml", "sudo apt-get install php5-xml", "sudo apt-get install php-dom" i've tried resetting server "sudo service apache2 restart". does have suggestions?
Read more

javascript - Highcharts Synchronized charts with missing data points -

Image
i have 2 charts display time series data trying synchronize crosshair , tool tips. however, charts not have same number of data points. causes crosshair , tooltip become out of sync between 2 graphs. i have enabled connectnulls: true on both , while smoothes lines, not add data points time periods don't exist. is there way configure connectnulls inserts filler points? updated here simple jsfiddle example, value missing day causes crosshairs become out of sync between 2 graphs. to set actual x distance between points, can set xaxis.ordinal false. other solution put null values in empty places. set pointstart , pointinterval properties. api reference: http://api.highcharts.com/highstock/xaxis.ordinal http://api.highcharts.com/highstock/plotoptions.series.pointstart http://api.highcharts.com/highstock/plotoptions.series.pointinterval examples: http://jsfiddle.net/csgbxdaj/ - setting ordinal false http://jsfiddle.net/gjxhbf7w/ - putting nulls i
Read more