Dva: 设置图片问题

Created on 15 Feb 2017  ·  2Comments  ·  Source: dvajs/dva

步骤: dva new dvaTest -> npm install -> code -> npm start

roadhog听说已经配置了url-loader并且limit=10000, 然后还是抛异常, 请问是什么原因 (菜鸟, 勿喷)

Module not found: ./assets/images/icon_add.png in E:\web\dvaTest\src\components

code:

import React from 'react';
import styles from './UserLayout.css';

function UserLayout(props) {
  return (
    <div className={styles.normal}>
      <img src={require('./assets/images/icon_add.png')} />
    </div>
  );
}
export default UserLayout;

Most helpful comment

可以这么用, 原来是路径问题 ~

您是采用 css 设置背景图片实现 , 然后还有人是这样写得 :

1: require('../../assets/images/icon_add.png')
2: import logo from '../../assets/images/icon_add.png';

以上引用都可以, 这种引用方式会变成以下形式, 而不是去请求服务器具体路径下得图片 ...

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAsCAYAAAAehFoBAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMDY3IDc5LjE1Nzc0NywgMjAxNS8wMy8zMC0yMzo0MDo0MiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTUgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjBENzc2NzBCNjQ0RDExRTZCMkNEQkNGN0FGNDBCRTU1IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjBENzc2NzBDNjQ0RDExRTZCMkNEQkNGN0FGNDBCRTU1Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MEQ3NzY3MDk2NDREMTFFNkIyQ0RCQ0Y3QUY0MEJFNTUiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MEQ3NzY3MEE2NDREMTFFNkIyQ0RCQ0Y3QUY0MEJFNTUiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz6biZCWAAAAgklEQVR42uzXsQ2AMAxE0RixUQaAko0IEwAbUYbJgusIuqOw9C1d48J+hVPEcs5JWMWzd73Nc6gWDClYAQYMGDBgwIABAwYMOFCNnlU4b/roNdUC8z9d4yQAB390RThv9ixd7/JUJfgUgu0FfCt3cMOAAQMGDBgwYMCAAQP+rx4BBgAMfAsWD6Yq/QAAAABJRU5ErkJggg==">

All 2 comments

js 里好像不能 require 图片吧,我没这么用过。

可以这么用, 原来是路径问题 ~

您是采用 css 设置背景图片实现 , 然后还有人是这样写得 :

1: require('../../assets/images/icon_add.png')
2: import logo from '../../assets/images/icon_add.png';

以上引用都可以, 这种引用方式会变成以下形式, 而不是去请求服务器具体路径下得图片 ...

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAsCAYAAAAehFoBAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMDY3IDc5LjE1Nzc0NywgMjAxNS8wMy8zMC0yMzo0MDo0MiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTUgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjBENzc2NzBCNjQ0RDExRTZCMkNEQkNGN0FGNDBCRTU1IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjBENzc2NzBDNjQ0RDExRTZCMkNEQkNGN0FGNDBCRTU1Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MEQ3NzY3MDk2NDREMTFFNkIyQ0RCQ0Y3QUY0MEJFNTUiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MEQ3NzY3MEE2NDREMTFFNkIyQ0RCQ0Y3QUY0MEJFNTUiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz6biZCWAAAAgklEQVR42uzXsQ2AMAxE0RixUQaAko0IEwAbUYbJgusIuqOw9C1d48J+hVPEcs5JWMWzd73Nc6gWDClYAQYMGDBgwIABAwYMOFCNnlU4b/roNdUC8z9d4yQAB390RThv9ixd7/JUJfgUgu0FfCt3cMOAAQMGDBgwYMCAAQP+rx4BBgAMfAsWD6Yq/QAAAABJRU5ErkJggg==">
Was this page helpful?
0 / 5 - 0 ratings