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

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

vue.js - Create hooks for automated testing -

Image
qa guys complained can't automate frontend testing. because our html looks same outside. lazy hack did this <template> <div :role="$options.name"> ... </div> </template> <script> export default { name: 'vmcomponentname' } </script> which takes name script , applies html. in browser get: <div role="vmcomponentname"> ... </div> line :role="$options.name" goes in every component. is there dry er solutions? please share. additional details i'll explain in details looking for. imagine have vmusercreate form creates user. test case can create user . to automatically test without role, have use following selector: .wrapper > .wrapper > .wrapper > .submit-button the test extremely brittle (will break lot). if use roles can use [role="vmusercreateform"] .submit-button selector. many folds less brittle. so basically, i'm ...
Read more

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